css3 images

来源：互联网发布：mysql gt lt 大于小于编辑：程序博客网时间：2024/06/15 22:36

图片响应式布局
使用CSS3中images新特性，设置如下：

img {    max-width: 100%;    height: auto;}

同时，可以使用@media查询，针对不同的媒介类型定制表现不同的样式。

图片贺卡

<style>body {margin:25px;}div.polaroid {  width: 80%;  background-color: white;  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);  margin-bottom: 25px;}div.container {  text-align: center;  padding: 10px 20px;}</style></head><body>    <div class="polaroid">      <img src="rock600x400.jpg" alt="Norway" style="width:100%">      <div class="container">        <p>The Troll's tongue in Hardanger, Norway</p>      </div>    </div></body>

这个可以结合flex布局发挥更大的作用；

图片滤波
css3 的图片特性中引入了图片滤波特性，定义了多种滤波器：

.blur {-webkit-filter: blur(4px);filter: blur(4px);}.brightness {-webkit-filter: brightness(250%);filter: brightness(250%);}.contrast {-webkit-filter: contrast(180%);filter: contrast(180%);}.grayscale {-webkit-filter: grayscale(100%);filter: grayscale(100%);}.huerotate {-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);}.invert {-webkit-filter: invert(100%);filter: invert(100%);}.opacity {-webkit-filter: opacity(50%);filter: opacity(50%);}.saturate {-webkit-filter: saturate(7); filter: saturate(7);}.sepia {-webkit-filter: sepia(100%);filter: sepia(100%);}.shadow {-webkit-filter: drop-shadow(8px 8px 10px green);filter: drop-shadow(8px 8px 10px green);}

目前IE、Edge12和Safari5.1及更早版本不支持此特性。

图片悬停覆盖
代码实例如下：

<!DOCTYPE html><html><head><style>.container {  position: relative;  width: 50%;}.image {  display: block;  width: 100%;  height: auto;}.overlay {  position: absolute;  top: 0;  bottom: 0;  left: 0;  right: 0;  height: 100%;  width: 100%;  opacity: 0;  transition: .5s ease;  background-color: #008CBA;}.container:hover .overlay {  opacity: 1;}.text {  color: white;  font-size: 20px;  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  -ms-transform: translate(-50%, -50%);}</style></head><body><h2>Fade in Overlay</h2><div class="container">  <img src="img_avatar.png" alt="Avatar" class="image">  <div class="overlay">    <div class="text">Hello World</div>  </div></div></body></html>

0 0