【CSS 30】万字总结 图像样式 圆角图像 缩略图像 响应式图像 居中图像 宝丽来图像 透明图像 图像文本 图像滤镜 悬停叠加 淡入 滑动 反转 响应式 模态
CSS
-
-
- 图像样式
- 图标悬停叠加
- 其他
-
图像样式
圆角图像
使用 border-radius 属性创建圆形图像
img {
border-radius: 8px;
}
img {
border-radius: 50%;
}
缩略图图像
使用 border 属性创建缩略图
img {
border: 1px solid #ddd;
border-radius: 24px;
/*padding: 5px;*/
width: 150px;
}
链接缩略图
DOCTYPE html>
<html>
<head>
<style>
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}
img:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
style>
head>
<body>
<h1>链接缩略图h1>
<p>使用border属性创建缩略图p>
<p>用锚包围图像从而使其作为链接p>
<a target="_blank" href="paris.jpg">
<img src="/i/photo/tulip.jpg" alt="Tulip" style="width: 150px">
a>
body>
html>
响应式图像
响应式图像会自动调整以适合屏幕尺寸
如果您希望根据需要缩小图像，但需要杜绝放大到大于原始尺寸，请添加如下代码
img {
max-width: 100%;
height: auto;
}
居中图像
如需使图像居中，请将左右外边距设置为 auto 并将其设置为块元素
img {
display: block;
margin-left: auto;
margin-right: auto;
}
响应式宝丽来图片/卡片
<style>
body {margin: 25px;}
div.polaroid {
width: 80%;
background-color: #eee;
box-shadow: 0 4px 8px 0 rgba(256, 256, 0, 0.99), 0 6px 20px 0 rgba(0, 256, 256, 0.99);
margin-bottom: 25px;
}
div.container {
font-style: italic;
font-weight: bold;
font-size: 15px;
font-family: '宋体';
color: brown;
text-align: center;
padding: 10px 20px;
}
style>
<body>
<h2>响应式宝丽来图像h2>
<div class="polaroid">
<img src="/i/photo/tulip-yellow.jpg" alt="Tulip" style="width: 100%">
<div class="container">
<p>黄色郁金香p>
div>
div>
<div class="polaroid">
<img src="/i/photo/tulip-red.jpg" alt="Tulip" style="width: 100%">
<div class="container">
<p>红色郁金香p>
div>
div>
body>
font 字体复合（简写）属性
font: font-style font-weight font-size/line-height font-family
使用font属性时，必须按上面的语法顺序书写，不能更换顺序，并且各个属性间以空格隔开
不需要设置的属性可以省略(自动取默认值)，但必须保留font-size和font-family属性，否则 font属性将不起作用
透明图像
opacity 属性的取值范围为 0.0 - 1.0
值越低，越透明
img {
opacity: 0.5;
}
图像文本
如何在图像中定位文本
.container {
position: relative;
}
.topleft {
position: absolute;
top: 8px;
left: 16px;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
图像滤镜
CSS filter 属性把视觉效果（如模糊和饱和度）添加到元素
img {
width: 33%;
height: auto;
float: left;
max-width: 240px;
}
.blur {filter: blur(4px);}
.brightness {filter: brightness(250%);}
.contrast {filter: contrast(180%);}
.grayscale {filter: grayscale(100%);}
.huerotate {filter: hue-rotate(180deg);}
.invert {filter: invert(100%);}
.opacity {filter: opacity(50%);}
.saturate {filter: saturate(7);}
.sepia {filter: sepia(100%);}
.shadow {filter: drop-shadow(8px 8px 10px green);}
图标悬停叠加
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: hotpink;
font-size: 20px;
font-weight: bold;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
style>
head>
<body>
<h1>淡入文本h1>
<div class="container">
<img src="/i/css/avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Li Haodiv>
div>
div>
body>
html>
2 淡入框
DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 50%;
}
.image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.container:hover .image {
opacity: 0.3;
}
.container:hover .middle {
opacity: 1;
}
.text {
background-color: #4CAF50;
color: white;
font-size: 25px;
padding: 16px 32px;
}
style>
head>
<body>
<h1>淡入框h1>
<div class="container">
<image src="/i/css/avatar.png" alt="Avatar" class="image" style="width:100%">
<div class="middle">
<div class="text">Zane Zhaodiv>
div>
div>
body>
html>
3 下滑框
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: hotpink;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}
.container:hover .overlay {
bottom: 0;
height: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 25px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
4 上滑框
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}
.container:hover .overlay {
height: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
5 右滑框
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}
.container:hover .overlay {
width: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
6 左滑框
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 100%;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}
.container:hover .overlay {
width: 100%;
left: 0;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
其他
反转图像
img:hover {
transform: scaleX(-1);
}
响应式图库
可以使用 CSS 创建自适应的图片库
本例使用媒体查询来重新排列不同屏幕尺寸的图像
请调整浏览器窗口的大小以查看效果
DOCTYPE html>
<html>
<head>
<style>
div.gallery {
border: 1px solid #ccc;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery 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>
<h1>响应式图库h1>
<h2>调整窗口大小查看效果h2>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="/i/photo/tulip-yellow.jpg">
<img src="/i/photo/tulip-yellow.jpg" alt="黄色郁金香" width="600" height="400">
a>
<div class="desc">黄色郁金香div>
div>
div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="/i/photo/tulip-red.jpg">
<img src="/i/photo/tulip-red.jpg" alt="红色郁金香" width="600" height="400">
a>
<div class="desc">红色郁金香div>
div>
div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="/i/photo/flower-1.jpg">
<img src="/i/photo/tulip-yellow.jpg" alt="花花草草" width="600" height="400">
a>
<div class="desc">花花草草div>
div>
div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="/i/photo/flower-2.jpg">
<img src="/i/photo/flower-2.jpg" alt="紫色小花" width="600" height="400">
a>
<div class="desc">紫色小花div>
div>
div>
body>
html>
图像模态（Image Modal）
DOCTYPE html>
<html>
<head>
<style>
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 1500px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content, #caption {
animation-name: zoom;
animation-duration: 0.6s;
}
@keyframes zoom {
from {transform: scale(0.1)}
to {transform: scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
style>
head>
<body>
<h1>图像模态h1>
<p>在此例中，我们使用 CSS 创建默认情况下隐藏的模式（对话框）。p>
<p>我们使用 JavaScript 触发模态，并在单击模态时在模态内显示当前图像。还请注意，我们将图像的“alt”属性中的值用作模态内的图像标题文本。p>
<p>如果您无法立即理解代码，请不要担心。学习完 CSS 后，请转到我们的 JavaScript 教程学习更多相关知识。p>
<img id="myImg" src="/i/photo/tiyugongyuan.jpg" alt="绿茵场" style="width: 50%;">
<div id="myModal" class="modal">
<span class="close">×span>
<img class="modal-content" id="img01">
<div id="caption">div>
div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Get the element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
script>
body>
html>