CSS 图片LOGIN

CSS 图片

首先我们先引入一张图片,加上一句描述语,使用 div 承载.

  <div class="image">
    <a href="./1348306907524.jpg" target="_self">
        <img src="1348306907524.jpg" width="150px" height="150px">
    </a>
    </div>
    <div>beautiful </div>

就是下面的效果:

QQ截图20161011172355.png


接下来我们就开始定制图片的显示:

图片加边框,修改描述字体中对其,修改字体大小,将整个 div 向左浮动,使边框与图片进行贴合:

.image{    border: 2px solid darkgrey;    width: auto;    height: auto;    float: left;    text-align: center;    padding: 5px;
}img{    padding: 5px;
}.text{    font-size: 20px;    margin-bottom: 5px;
}

这就是处理过后的的效果

QQ截图20161011172401.png


之后我么再设计图片的透明度: 这个比较简单,就只需要在图片 CSS 设置中加入:

opacity: 0.5;

这个属性的值范围为 0-1 设置透明度,0 为完全透明,1 代表完全不透明.

下面就是半透明的效果图:


QQ截图20161011172410.png

下一节
<div></div> <a href="http://img3.imgtn.bdimg.com/it/u=1146657670,2051686823&fm=21&gp=0.jpg" target="_self"> <img src="http://img3.imgtn.bdimg.com/it/u=1146657670,2051686823&fm=21&gp=0.jpg" width="150px" height="150px"> </a> <div>beautiful </div>
提交重置代码
章节课件