上查看所有课程
图片是使用指定 URL 在网页上显示的视觉内容。例如，
样式化图片
上面的示例使用 CSS 显示了样式化的图片。
图片对于增强网站的视觉吸引力、传达信息和吸引用户至关重要。
在 HTML 中添加图片
图片是使用 <img> 元素添加到 HTML 中的。
<img src="house.png" alt="A building" />浏览器输出
上面的示例显示了没有 CSS 样式的默认 HTML 图片。
注意：默认情况下，图片会采用其默认的宽度和高度。
样式化你的图片
我们可以使用 CSS 以以下方式对图片进行样式化，
- 更改图片尺寸
- 为图片添加圆角
- 居中图片
- 创建响应式图片
- 创建缩略图
- 创建透明图片
- 添加背景图片
- 创建图片卡片
- 创建图片文字叠加
- object-fit 属性
- 应用图片滤镜
- 为图片添加悬停效果
- 为图片添加翻转效果
让我们详细了解它们。
更改图片尺寸
width 和 height 属性用于调整图片尺寸。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Image Size</title>
</head>
<body>
<h2>Original Image</h2>
<img src="https://programiz.com.cn/blog/content/images/2020/11/intro-c-banner-1-1.png" alt="Avatar of a standing girl" />
<div class="styled-image">
<h2>After setting up width and height properties</h2>
<img src="https://programiz.com.cn/blog/content/images/2020/11/intro-c-banner-1-1.png" alt="Avatar of a standing girl" />
</div>
</body>
</html>.styled-image img {
width: 280px;
height: 200px;
}浏览器输出
原始图片
设置宽度和高度属性后
上面的示例显示了默认图片以及宽度和高度分别为 280px 和 200px 的图片。
注意：调整图片的 width 和 height 属性会改变其宽度与高度的比例。这称为扭曲宽高比。
要保持图片的原始比例，请使用 max-width 属性设置宽度的上限，同时让高度自动调整。
为图片添加圆角
border-radius 属性用于在图片周围添加圆角。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Image Styling</title>
</head>
<body>
<img src="https://images.unsplash.com/photo-1570129477492-45c003edd2be?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Building" />
</div>
</body>
</html>img {
width: 200px;
height: 200px;
border-radius: 10px;
}浏览器输出
在上面的示例中，border-radius 属性将图片的圆角设置为 10px 的 border-radius。
我们可以通过添加
border-radius: 50%;浏览器输出
居中图片
我们可以借助 display 和 margin 属性将图片居中到容器中。例如，
img {
width: 150px;
display: block;
margin-left: auto;
margin-right: auto;
}浏览器输出
在上面的例子中：
-
display: block将图片转换为块级元素 -
margin-left: auto和margin-right: auto通过在其周围创建相等的空间来水平居中图片
注意：块级元素开始于新的一行，并占据父元素的全部可用宽度。
创建响应式图片
max-width 属性用于使图片响应式。例如，
img {
max-width: 500px;
height: auto;
}浏览器输出
这里，
-
max-width: 500px为图片设置了500px的最大宽度 height: auto保持图片的宽高比
注意：请注意，max-width 属性只会缩小图片。如果图片小于其容器，它不会放大以填充容器。
创建缩略图
border 属性用于创建缩略图。例如，
img {
max-width: 150px;
border: 1px solid black;
padding: 10px;
}浏览器输出
在这里，border 属性在图片周围添加了 1px 的 solid black 边框，使其外观像缩略图。
创建透明图片
opacity 属性为图片添加透明度。
opacity 属性的值范围是 0.0 到 1.0。值越低表示图片越透明。
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Transparent Image</title>
</head>
<body>
<div>
<p>Opacity-0.1</p>
<img
class="first-image"
src="https://images.unsplash.com/photo-1570129477492-45c003edd2be?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
alt="Building" />
</div>
<div>
<p>Opacity-0.5</p>
<img
class="second-image"
src="https://images.unsplash.com/photo-1570129477492-45c003edd2be?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
alt="Building" />
</div>
<div>
<p>Opacity-1</p>
<img
class="third-image"
src="https://images.unsplash.com/photo-1570129477492-45c003edd2be?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
alt="Building" />
</div>
</body>
</html>img {
max-width: 150px;
}
.first-image {
opacity: 0.1;
}
.second-image {
opacity: 0.5;
}
.third-image {
opacity: 1;
}
div {
display: inline-block;
margin-right: 20px;
}浏览器输出
上面的示例显示了不同不透明度值的图片。
添加背景图片
我们可以添加一张图片作为元素的背景。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS image</title>
</head>
<body>
<h2>Adding a background image</h2>
</body>
</html>body {
background-image: url("https://images.unsplash.com/photo-1621091211034-53136cc1eb32?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80");
}浏览器输出
添加背景图片
在上面的示例中，background-image 属性将背景图片添加到网页的正文。
创建图片卡片
让我们使用不同的 CSS 属性创建一个图片卡片。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Image Card</title>
</head>
<body>
<div class="image-card">
<img
src="https://images.unsplash.com/photo-1570129477492-45c003edd2be?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
alt="Image Description" />
<div class="card-content">
<p>Image Card</p>
</div>
</div>
</body>
</html>.image-card {
max-width: 200px;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
border-radius: 8px;
overflow: hidden;
}
.image-card img {
width: 100%;
height: auto;
}
.card-content {
text-align: center;
}浏览器输出
上面的示例创建了一个简单的图片卡片。
创建图片文字叠加
我们可以使用不同的 CSS 属性将文本放置和定位在图片上。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Image Text</title>
</head>
<body>
<div class="container">
<img src="https://images.unsplash.com/photo-1444080748397-f442aa95c3e5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1932&q=80"
alt="Building" />
<p class="top-left">Top Left</p>
<p class="top-right">Top Right</p>
<p class="bottom-left">Bottom Left</p>
<p class="bottom-right">Bottom Right</p>
<p class="center">Center</p>
</div>
</body>
</html>.container {
position: relative;
}
.top-left {
position: absolute;
top: 5px;
left: 10px;
color: white;
}
.top-right {
position: absolute;
top: 5px;
right: 10px;
color: white;
}
.bottom-left {
position: absolute;
bottom: 5px;
left: 10px;
color: white;
}
.bottom-right {
position: absolute;
bottom: 5px;
right: 10px;
color: white;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
img {
width: 100%;
height: 200px;
}浏览器输出
上面的示例显示了文本在图片上的不同位置。
注意：要将任何内部子元素绝对定位在容器内，请务必将容器的 position 设置为 relative。
这是因为绝对定位的元素是相对于其最近的已定位祖先进行定位的。
Object Fit
object-fit 属性指定了图片如何在不影响其宽高比的情况下适应容器。
object-fit 属性可以接受多个值，例如
fill：拉伸图片以填充整个容器-
contain：缩放图片以适合容器，同时保持其宽高比 cover：缩放图片以覆盖整个容器-
scale-down：将图片缩小到其最小版本 none：不调整图片大小
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Object-Fit Example</title>
</head>
<body>
<h2>Object-Fit: Fill</h2>
<div>
<img
class="fill" src="https://images.unsplash.com/photo-1444080748397-f442aa95c3e5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1932&q=80"
alt="Image" />
</div>
<h2>Object-Fit: Cover</h2>
<div>
<img
class="cover" src="https://images.unsplash.com/photo-1444080748397-f442aa95c3e5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1932&q=80"
alt="Image" />
</div>
<h2>Object-Fit: Scale Down</h2>
<div>
<img
class="scale-down" src="https://images.unsplash.com/photo-1444080748397-f442aa95c3e5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1932&q=80"
alt="Image" />
</div>
<h2>Object-Fit: Contain</h2>
<div>
<img
class="contain" src="https://images.unsplash.com/photo-1444080748397-f442aa95c3e5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1932&q=80"
alt="Image" />
</div>
</body>
</html>img {
width: 200px;
height: 200px;
border: 2px solid #333;
margin: 10px;
}
img.fill {
object-fit: fill;
}
img.cover {
object-fit: cover;
}
img.scale-down {
object-fit: scale-down;
}
img.contain {
object-fit: contain;
}浏览器输出
Object-Fit: Fill
Object-Fit: Cover
Object-Fit: Scale Down
Object-Fit: Contain
上面的示例显示了 object-fit 属性的不同值。
图片滤镜
filter 属性用于在元素上创建各种视觉效果。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Image Filter</title>
</head>
<body>
<div>
<p>filter: blur(3px);</p>
<img class="blur" src="https://images.unsplash.com/photo-1570129477492-45c003edd2be?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="buiilding" style="max-width: 200px; filter: blur(3px)"
/>
</div>
<div>
<p>filter: brightness(150%);</p>
<img class="brightness" src="https://images.unsplash.com/photo-1570129477492-45c003edd2be?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="building" />
</div>
<div>
<p>filter: contrast(200%);</p>
<img class="contrast" src="https://images.unsplash.com/photo-1570129477492-45c003edd2be?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="building" />
</div>
<div>
<p>filter: sepia(100%)</p>
<img class="sepia" src="https://images.unsplash.com/photo-1570129477492-45c003edd2be?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="building" />
</div>
<div>
<p>filter: greyscale(100%)</p>
<img class="grayscale" src="https://images.unsplash.com/photo-1570129477492-45c003edd2be?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="building" />
</div>
<div>
<p>filter: hue-rotate(90deg)</p>
<img class="huerotate" src="https://images.unsplash.com/photo-1570129477492-45c003edd2be?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="building" />
</div>
<div>
<p>filter: invert(150%)</p>
<img class="invert" src="https://images.unsplash.com/photo-1570129477492-45c003edd2be?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="building" />
</div>
<div>
<p>filter: saturate(5)</p>
<img class="saturate" src="https://images.unsplash.com/photo-1570129477492-45c003edd2be?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="building" />
</div>
</body>
</html>div {
display: inline-block;
margin: 12px;
}
img {
max-width: 200px;
}
img.blur {
filter: blur(3px);
}
img.brightness {
filter: brightness(150%);
}
img.contrast {
filter: contrast(200%);
}
img.sepia {
filter: sepia(100%);
}
img.greyscale {
filter: greyscale(100%);
}
img.huerotate {
filter: hue-rotate(90deg);
}
img.invert {
filter: invert(150%);
}
img.saturate {
filter: saturate(5);
}浏览器输出
filter: blur(3px);
filter: brightness(150%);
filter: contrast(200%);
filter: sepia(100%)
filter: greyscale(100%)
filter: hue-rotate(90deg)
filter: invert(150%)
filter: saturate(5)
上面的示例显示了不同的图片滤镜。
图片悬停叠加
使用 :hover 伪类选择器可以在悬停图片时更改叠加效果。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Image Overlay</title>
</head>
<body>
<div class="container">
<img src="https://images.unsplash.com/photo-1570129477492-45c003edd2be?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
alt="buiilding" />
<div class="overlay overlay-left">
<p class="overlay-text">Slide in (left)</p>
</div>
</div>
<div class="container">
<img src="https://images.unsplash.com/photo-1570129477492-45c003edd2be?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
alt="buiilding" />
<div class="overlay overlay-right">
<p class="overlay-text">Slide in (right)</p>
</div>
</div>
<div class="container">
<img src="https://images.unsplash.com/photo-1570129477492-45c003edd2be?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
alt="buiilding" />
<div class="overlay overlay-top">
<p class="overlay-text">Slide in (top)</p>
</div>
</div>
<div class="container">
<img src="https://images.unsplash.com/photo-1570129477492-45c003edd2be?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
alt="buiilding" />
<div class="overlay overlay-bottom">
<p class="overlay-text">Slide in (bottom)</p>
</div>
</div>
</body>
</html>.container {
max-width: 200px;
border: 1px solid black;
position: relative;
overflow: hidden;
margin-bottom: 12px;
}
.overlay {
width: 100%;
height: 100%;
background-color: purple;
position: absolute;
transition: all 0.7s ease;
}
.overlay-text {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: white;
font-weight: bold;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* creating the left overlay */
.overlay-left {
left: -100%;
top: 0;
}
.container:hover .overlay-left {
left: 0;
}
/* creating the right overlay */
.overlay-right {
right: -100%;
top: 0;
}
.container:hover .overlay-right {
right: 0;
}
/* creating the bottom overlay */
.overlay-bottom {
bottom: -100%;
left: 0;
}
.container:hover .overlay-bottom {
bottom: 0;
}
/* creating the top overlay */
.overlay-top {
top: -100%;
left: 0;
}
.container:hover .overlay-top {
top: 0;
}浏览器输出
上面的示例显示了悬停图片时的不同叠加效果。
翻转图片
让我们看看如何翻转图片。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Image Flips</title>
</head>
<body>
<div>
<p>Horizontal Flip</p>
<img
class="horizontal-flip"
src="https://images.unsplash.com/photo-1570129477492-45c003edd2be?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
alt="buiilding" />
</div>
<div>
<p>Vertical Flip</p>
<img
class="vertical-flip" src="https://images.unsplash.com/photo-1570129477492-45c003edd2be?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
alt="buiilding" />
</div>
<div>
<p>Diagonal Flip</p>
<img
class="diagonal-flip" src="https://images.unsplash.com/photo-1570129477492-45c003edd2be?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
alt="buiilding" />
</div>
</body>
</html>div {
display: inline-block;
margin: 12px;
}
img {
width: 200px;
}
img.horizontal-flip:hover {
transform: scaleX(-1);
}
img.vertical-flip:hover {
transform: scaleY(-1);
}
img.diagonal-flip:hover {
transform: scaleX(-1) scaleY(-1);
}浏览器输出
水平翻转
垂直翻转
对角线翻转
上面的示例显示了翻转图片的各种方法。