css3 images

最新推荐文章于 2024-01-26 09:16:49 发布

Neil-

最新推荐文章于 2024-01-26 09:16:49 发布

阅读量529

点赞数

分类专栏： web前端文章标签： css3 响应式布局 image

web前端专栏收录该内容

98 篇文章 0 订阅

订阅专栏

图片响应式布局

使用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>