CSS - 图片
在本文中，我们将学习如何使用不同的 CSS 属性（如 padding、border、height、width、margin 等）来样式化图片，从而改变其形状、大小和布局。
目录
- 圆角图片
- 圆形和椭圆形图片
- 带边框的图片
- 图片滤镜
- 图片作为卡片
- 居中图片
- 图片内文字
- 图片渐入叠加层
圆角图片
以下示例演示了如何使用 border-radius 属性创建圆角边框图片。
示例
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100px;
height: 100px;
border-radius: 20px;
}
</style>
</head>
<body>
<img src="/css/images/pink-flower.jpg" alt="pink-flower">
</body>
</html>
圆形和椭圆形图片
以下示例演示了如何使用 border-radius: 50% 属性创建圆形和椭圆形图片。当图片的高度和宽度相同时，将得到圆形图片；当它们不相同时，将得到椭圆形图片。
示例
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100px;
height: 100px;
border-radius: 50%;
}
</style>
</head>
<body>
<img src="/css/images/pink-flower.jpg" alt="pink-flower">
<img src="/css/images/pink-flower.jpg"
style="height: 50px" alt="pink-flower">
</body>
</html>
带边框的图片
以下示例演示了如何为任意图片创建 border。
示例
<!DOCTYPE html>
<html>
<head>
<style>
img {
border: 2px solid red;
border-radius: 10px;
border: 7px solid black;
width: 150px;
}
</style>
</head>
<body>
<img src="/css/images/pink-flower.jpg" alt="pink-flower">
</body>
</html>
图片滤镜
以下示例演示了使用 filter 属性为图片应用不同的滤镜效果。
示例
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: auto;
height: 50px;
margin: 10px;
}
</style>
</head>
<body>
<h4>模糊滤镜</h4>
<img style="filter: blur(3px);" src="/css/images/pink-flower.jpg">
<h4>反色滤镜</h4>
<img style="filter: invert(110%);" src="/css/images/pink-flower.jpg">
<h4>饱和度滤镜</h4>
<img style="filter: saturate(8);" src="/css/images/pink-flower.jpg">
<h4>棕褐滤镜</h4>
<img style="filter: sepia(110%);" src="/css/images/pink-flower.jpg">
</body>
</html>
图像作为卡片
以下示例演示了一个响应式的复古照片风格图像，带有阴影效果。
<!DOCTYPE html>
<html>
<head>
<style>
.polaroid-image {
width: 60%;
height: 200px;
background-color: white;
box-shadow: 0 3px 6px 0 grey, 0 8px 16px 0 black;
margin-bottom: 25px;
margin: 20px;
}
img {
width: 100%;
height: 150px;
}
.box {
text-align: center;
padding: 5px;
}
</style>
</head>
<body>
<div class="polaroid-image">
<img src="/css/images/red-flower.jpg" alt="Flower">
<div class="box">
<p>Tree</p>
</div>
</div>
</body>
</html>
居中图像
有几种方法可以在容器内居中图像，最流行的是使用 flex 布局结合 justify-content 和 align-items 属性。
- justify-content: center: 这将使图像水平居中
- align-items: center: 这将使图像垂直居中
示例
在这个示例中，我们使用 flex 布局来居中图像
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
border: 2px solid black;
}
img {
max-width: 100%;
height: auto;
border: 1px solid;
}
</style>
</head>
<body>
<div class="container">
<img src="/css/images/logo.png">
</div>
</body>
</html>
图像内的文本
在 CSS 中，position 属性可用于将文本定位到图像内的不同位置。
首先，我们需要将图像容器的 position 属性设置为 `position: relative`，将文本的 position 属性设置为 `position: absolute`。现在，你可以使用 inset 属性（如 top、bottom、right 和 left）来定位文本元素。
示例
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
border: 2px solid #ef2c2c;
}
.center {
position: absolute;
top: 45%;
width: 100%;
text-align: center;
}
.top-left {
position: absolute;
top: 12px;
left: 30px;
}
.top-right {
position: absolute;
top: 12px;
right: 30px;
}
.bottom-left {
position: absolute;
bottom: 12px;
left: 30px;
}
.bottom-right {
position: absolute;
bottom: 12px;
right: 30px;
}
img {
width: 100%;
opacity: 0.7;
}
</style>
</head>
<body>
<div class="container">
<img src="/css/images/red-flower.jpg"
width="1000px" height="350px">
<h3 class="center">
Text at Center
</h3>
<h3 class="top-left">
Text at Top Left
</h3>
<h3 class="top-right">
Text at Top Right
</h3>
<h3 class="bottom-left">
Text at Bottom Left</h3>
<h3 class="bottom-right">
Text at Bottom Right
</h3>
</div>
</body>
</html>
图片渐入叠加层
渐入叠加层效果在鼠标悬停图片时显示文本。还有其他几种叠加层效果，要完全理解，请查看我们的 CSS overlay effects 教程。
让我们来看一个图片渐入叠加层效果的示例。
示例
<!DOCTYPE html>
<html>
<head>
<style>
.img-container {
position: relative;
width: 250px;
}
.img-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
opacity: 0;
transition: opacity 0.4s ease;
}
.overlay-text {
color: red;
font-weight: bold;
font-size: 25px;
position: absolute;
top: 40%;
left: 20%;
}
.img-container:hover .img-overlay {
opacity: 1;
}
img {
width: 100%;
height: 200px;
display: block;
}
</style>
</head>
<body>
<div class="img-container">
<div class="img-overlay">
<div class="overlay-text"></div>
</div>
<img src="/css/images/see.jpg" alt="See Image">
</div>
</body>
</html>