H5学习之25 CSS 给图片增加框透明度的设置

来源：互联网发布：html5 javascript 联系编辑：程序博客网时间：2024/06/06 19:03

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        div.img{            float:left;            padding:5px;            margin:5px;            border: 1px solid;            border-color: dimgrey;            text-align: center;            width:auto;            height: auto;        }        div.img img{            margin: 3px;            border: 1px solid black;            opacity:0.4;        }        /*        稍微多注意一下选择器选择的元素        opacity:0.4 设置透明度为0.4,鼠标不在图片上的时候透明的。        */        div.img a:hover img{            border: 1px solid red;            opacity:1;        }        /*        当鼠标移到图片上时设置透明度=1，也就是不透明。        */        div.desc{            text-align: center;            font-weight: normal;            width:150px;            font-size: 12px;        }/*------------------------------------------------------------------------------------------------------*/        div.back{            clear:left;            width: 400px;            height: 266px;            border: 1px solid beige;            background-image: url(1.jpg);            text-align: center;            margin: 10px;            padding: 0;        }        div.transbox{            background-color: white;            opacity: 0.6;            width:300px;            height:200px;            margin-left: 50px;            margin-top:33px;        }        p{            margin: 0;        }        /*在这里，我把back的内边距取消，transbox的外边距取消，发现还是无法让trans左上角与back左上角重合，        用chrome查看之后发现是段落p有一个外边距导致，设置成0就可以实现了。        chrome能够很好的查看元素的大小 位置 信息等。*/    </style></head><body><div class="img">    <a target="_blank" href="1.jpg">        <img src="1.jpg" alt="图片" width="160px"  height="160px"  />    </a>    <div class="desc">在此添加对于图片的描述</div></div><!--结构是一个div，里头套着一个a（a里又有一个img），和一个div，用以创建包裹着 图片的一块区域--><div class="img">    <a target="_blank" href="2.jpg">        <img src="2.jpg" alt="图片" width="160px"  height="160px"/>    </a>    <div class="desc" >在此添加对于图片的描述</div></div><div class="img">    <a target="_blank" href="3.jpg">        <img src="3.jpg" alt="图片" width="160px"  height="160px"/>    </a>    <div class="desc">在此添加对于图片的描述</div></div><div class="img">    <a target="_blank" href="4.jpg">        <img src="4.jpg" alt="图片" width="160px"  height="160px"/>    </a>    <div class="desc">在此添加对于图片的描述</div></div><!---------------------------------------------------------------------------------------------------><div class="back">    <div class="transbox">        <p>ssssssssssssssssssssssssssss            sssssssssssssssssssssss</p>    </div></div><!--其实就是一个div 嵌套一个div，内部的div里再有一个段落，给外部的div一个 背景，内部的div设置一下背景颜色，透明度。再调整一下位置。就好了--></body></html>

具体效果如下：

代码解释如下：

两个部分。

第一部分是4个并列的图片，而且有框包裹，当鼠标移动到图片上时还可以点击，图片周围还会出现带有颜色的边框。

<div class="img">    <a target="_blank" href="1.jpg">        <img src="1.jpg" alt="图片" width="160px"  height="160px"  />    </a>    <div class="desc">在此添加对于图片的描述</div></div><!--结构是一个div，里头套着一个a（a里又有一个img），和一个div，用以创建包裹着 图片的一块区域-->

一个图片，不一一赘述

div.img{    float:left;    padding:5px;    margin:5px;    border: 1px solid;    border-color: dimgrey;    text-align: center;    width:auto;    height: auto;}div.img img{    margin: 3px;    border: 1px solid black;    opacity:0.4;}/*稍微多注意一下选择器选择的元素opacity:0.4 设置透明度为0.4,鼠标不在图片上的时候透明的。*/div.img a:hover img{    border: 1px solid red;    opacity:1;}/*当鼠标移到图片上时设置透明度=1，也就是不透明。*/div.desc{    text-align: center;    font-weight: normal;    width:150px;    font-size: 12px;}

多注意一下这个结构，是一个div，内嵌着一个div，内部的div里再有一个a标签，a标签的内容是一个img标签

其次就是设置一些样式的简单问题了。

透明度 opacity:0-1 需要IE8以上。现在的大部分浏览器肯定都支持。

第二部分，是一个带有图片背景的区域，区域内有一块透明的区域显示文本。

<div class="back">    <div class="transbox">        <p>ssssssssssssssssssssssssssss            sssssssssssssssssssssss</p>    </div></div><!--其实就是一个div 嵌套一个div，内部的div里再有一个段落，给外部的div一个 背景，内部的div设置一下背景颜色，透明度。再调整一下位置。就好了-->

div.back{    clear:left;    width: 400px;    height: 266px;    border: 1px solid beige;    background-image: url(1.jpg);    text-align: center;    margin: 10px;    padding: 0;}div.transbox{    background-color: white;    opacity: 0.6;    width:300px;    height:200px;    margin-left: 50px;    margin-top:33px;}p{    margin: 0;}/*在这里，我把back的内边距取消，transbox的外边距取消，发现还是无法让trans左上角与back左上角重合，用chrome查看之后发现是段落p有一个外边距导致，设置成0就可以实现了。chrome能够很好的查看元素的大小 位置 信息等。*/

做这个需要注意的就是上边注释的位置问题了。调整内部div的margin为0 外部div的padding为0 以为可以让内部div位置出现在00 但是没有，还有有一小段，用了chrome浏览器之后发现是因为段落p有margin，设置为0之后，果然内外div重合了。

0 0

H5学习之25 CSS 给图片增加框 透明度的设置

H5学习之25 CSS 给图片增加框透明度的设置