草庐IT

CSS基础-17-图片处理（图片廊、透明图片）

开发运维玄德公 2023-09-28 原文

@[toc]

1. 简单图片廊

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>hello world</title>
    <style>
        /* 打img标签的div的效果 */
        div.img {
            margin: 5px;
            border: 1px solid #ccc;
            float: left;
            width: 180px;
        }

        /* 鼠标悬停加效果 */
        div.img:hover {
            border: 1px solid #777;
        }

        /* 打img标签的div元素下的img元素的效果 */
        div.img img {
            width: 100%;
            height: auto;
        }

        /* 图片描述的效果 */
        div.desc {
            padding: 15px;
            text-align: center;
        }
    </style>
</head>

<body>

    <div>
        <div class="img">
            <a target="_blank" href="images/liubei.webp">
                <img src="images/liubei.webp" alt="图片文本描述" width="300" height="200">
            </a>
            <div class="desc">刘备</div>
        </div>
    </div>

    <div>
        <div class="img">
            <a target="_blank" href="images/guanyu.webp">
                <img src="images/guanyu.webp" alt="图片文本描述" width="300" height="200">
            </a>
            <div class="desc">关羽</div>
        </div>
    </div>

    <div>
        <div class="img">
            <a target="_blank" href="images/zhangfei.webp">
                <img src="images/zhangfei.webp" alt="图片文本描述" width="300" height="200">
            </a>
            <div class="desc">张飞</div>
        </div>
    </div>

    <div>
        <div class="img">
            <a target="_blank" href="images/zhugeliang.webp">
                <img src="images/zhugeliang.webp" alt="图片文本描述" width="300" height="200">
            </a>
            <div class="desc">诸葛亮</div>
        </div>
    </div>

</body>

</html>

  • 效果


    image.png

  • 将浏览器拉窄


    image.png

  • 继续拉窄


    image.png

2. 响应式图片廊

概念

图片元素可以根据浏览器状况而改变
实质是为图片设置了各种属性，以便图片能更好的播放以方便用户。

完整示例

  • 代码
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>hello world</title>
    <style>
        div.img {
            border: 1px solid #ccc;
        }

        div.img:hover {
            border: 1px solid #777;
        }

        div.img img {
            width: 100%;
            height: auto;
        }

        div.desc {
            padding: 15px;
            text-align: center;
        }

        * {
            box-sizing: border-box;
        }

        .responsive {
            padding: 0 6px;
            float: left;
            width: 24.99999%;
        }

        @media only screen and (max-width: 700px) {
            .responsive {
                width: 49.99999%;
                margin: 6px 0;
            }
        }

        @media only screen and (max-width: 500px) {
            .responsive {
                width: 100%;
            }
        }

        .clearfix:after {
            content: "";
            display: table;
            clear: both;
        }
    </style>
</head>

<body>

    <h2 style="text-align:center">响应式图片相册</h2>

    <div class="responsive">
        <div class="img">
            <a target="_blank" href="images/liubei.webp">
                <img src="images/liubei.webp" alt="Trolltunga Norway" width="300" height="200">
            </a>
            <div class="desc">刘备</div>
        </div>
    </div>


    <div class="responsive">
        <div class="img">
            <a target="_blank" href="images/guanyu.webp">
                <img src="images/guanyu.webp" alt="Forest" width="600" height="400">
            </a>
            <div class="desc">关羽</div>
        </div>
    </div>

    <div class="responsive">
        <div class="img">
            <a target="_blank" href="images/zhangfei.webp">
                <img src="images/zhangfei.webp" alt="Northern Lights" width="600" height="400">
            </a>
            <div class="desc">张飞</div>
        </div>
    </div>

    <div class="responsive">
        <div class="img">
            <a target="_blank" href="images/zhugeliang.webp">
                <img src="images/zhugeliang.webp" alt="Mountains" width="600" height="400">
            </a>
            <div class="desc">诸葛亮</div>
        </div>
    </div>

    <div class="clearfix"></div>

    <div style="padding:6px;">

    </div>

</body>

</html>

  • 查看结果


    image.png

  • 缩小浏览器，图片大小随之改变


    image.png

  • 继续变窄，图片变成两行


    image.png

2. 透明图片

语法示例

opacity:0.8;

完整示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>玄德公记事</title> 
<style>
img
{
    opacity:1.0;
}

img:hover
{
    opacity:0.5;
}
</style>
</head>
<body>

<img src="./images/taoyuanjieyi.jpeg" width="50" height="45" alt="klematis">

</body>
</html>
  • 说明：

IE8和更早版本使用： filter:alpha(opacity=100)。

  • 结果显示


    image.png

  • 鼠标放上去之后


    image.png
image.png
图片CSSsectiongtlt

有关CSS基础-17-图片处理（图片廊、透明图片）的更多相关文章

  1. ruby - 如何指定 Rack 处理程序 - 2

    Rackup通过Rack的默认处理程序成功运行任何Rack应用程序。例如:classRackAppdefcall(environment)['200',{'Content-Type'=>'text/html'},["Helloworld"]]endendrunRackApp.new但是当最后一行更改为使用Rack的内置CGI处理程序时，rackup给出“NoMethodErrorat/undefinedmethod`call'fornil:NilClass”:Rack::Handler::CGI.runRackApp.newRack的其他内置处理程序也提出了同样的反对意见。例如Rack

  2. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No

  3. ruby-on-rails - Ruby on Rails - 为文本区域和图片生成列 - 2

    我是Rails的新手，所以请原谅简单的问题。我正在为一家公司创建一个网站。那家公司想在网站上展示它的客户。我想让客户自己管理这个。我正在为“客户”生成一个表格，我想要的三列是:公司名称、公司描述和Logo。对于名称，我使用的是name:string但不确定如何在脚本/生成脚手架终端命令中最好地创建描述列(因为我打算将其设置为文本区域)和图片。我怀疑描述(我想成为一个文本区域)应该仍然是描述:字符串，然后以实际形式进行调整。不确定如何处理图片字段。那么……说来话长:我在脚手架命令中输入什么来生成描述和图片列？ 最佳答案 对于“文本”数

  4. css - 用 watir 检查标签类？ - 2

    我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes

  5. postman接口测试工具-基础使用教程 - 2

    1.postman介绍Postman一款非常流行的API调试工具。其实，开发人员用的更多。因为测试人员做接口测试会有更多选择，例如Jmeter、soapUI等。不过，对于开发过程中去调试接口，Postman确实足够的简单方便，而且功能强大。2.下载安装官网地址:https://www.postman.com/下载完成后双击安装吧，安装过程极其简单，无需任何操作3.使用教程这里以百度为例,工具使用简单，填写URL地址即可发送请求，在下方查看响应结果和响应状态码常用方法都有支持请求方法:getpostputdeleteGet、Post、Put与Delete的作用get：请求方法一般是用于数据查询，

  6. 软件测试基础 - 2

    Ⅰ软件测试基础一、软件测试基础理论1、软件测试的必要性所有的产品或者服务上线都需要测试2、测试的发展过程3、什么是软件测试找bug，发现缺陷4、测试的定义使用人工或自动的手段来运行或者测试某个系统的过程。目的在于检测它是否满足规定的需求。弄清预期结果和实际结果的差别。5、测试的目的以最小的人力、物力和时间找出软件中潜在的错误和缺陷6、测试的原则28原则：20%的主要功能要重点测（eg：支付宝的支付功能，其他功能都是次要的）80%的错误存在于20%的代码中7、测试标准8、测试的基本要求功能测试性能测试安全性测试兼容性测试易用性测试外观界面测试可靠性测试二、质量模型衡量一个优秀软件的维度①功能性功

  7. ES基础入门 - 2

    ES一、简介1、ElasticStackES技术栈：ElasticSearch：存数据+搜索；QL；Kibana：Web可视化平台，分析。LogStash：日志收集，Log4j:产生日志；log.info(xxx)。。。。使用场景：metrics：指标监控…2、基本概念Index（索引）动词：保存（插入）名词：类似MySQL数据库，给数据Type（类型）已废弃，以前类似MySQL的表现在用索引对数据分类Document（文档）真正要保存的一个JSON数据{name:"tcx"}二、入门实战{"name":"DESKTOP-1TSVGKG","cluster_name":"elasticsear

  8. Ruby-vips 图像处理库。有什么好的使用示例吗？ - 2

    我对图像处理完全陌生。我对JPEG内部是什么以及它是如何工作一无所知。我想知道，是否可以在某处找到执行以下简单操作的ruby​​代码:打开jpeg文件。遍历每个像素并将其颜色设置为fx绿色。将结果写入另一个文件。我对如何使用ruby​​-vips库实现这一点特别感兴趣https://github.com/ender672/ruby-vips我的目标-学习如何使用ruby​​-vips执行基本的图像处理操作(Gamma校正、亮度、色调……)任何指向比“helloworld”更复杂的工作示例的链接——比如ruby​​-vips的github页面上的链接，我们将不胜感激!如果有ruby​​-

  9. ruby - Faye WebSocket，关闭处理程序被触发后重新连接到套接字 - 2

    我有一个super简单的脚本，它几乎包含了FayeWebSocketGitHub页面上用于处理关闭连接的内容:ws=Faye::WebSocket::Client.new(url,nil,:headers=>headers)ws.on:opendo|event|p[:open]#sendpingcommand#sendtestcommand#ws.send({command:'test'}.to_json)endws.on:messagedo|event|#hereistheentrypointfordatacomingfromtheserver.pJSON.parse(event.d

  10. ruby - 如何使用 Ruby HTTP::Net 处理 404 错误？ - 2

    我正在尝试解析网页，但有时会收到404错误。这是我用来获取网页的代码:result=Net::HTTP::getURI.parse(URI.escape(url))如何测试result是否为404错误代码？ 最佳答案 像这样重写你的代码:uri=URI.parse(url)result=Net::HTTP.start(uri.host,uri.port){|http|http.get(uri.path)}putsresult.codeputsresult.body这将打印状态码和正文。

随机推荐