在本教程中，我们将了解如何使用不同的 CSS 属性（例如内边距padding、边框border、高度height、宽度width、边距margin等）设置图像样式以更改其形状、大小和布局。
CSS 图片样式: 圆角图片
下面的例子演示了如何使用border-radius: 20px属性来创建圆形边框图像 -
<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> CSS 图片样式: 圆形图像
以下示例演示如何使用 border-radius: 50% 属性创建圆形图像 -
<html>
<head>
<style>
img {
width: 100px;
height: 100px;
border-radius: 50%;
}
</style>
</head>
<body>
<img src="/css/images/pink-flower.jpg" alt="pink-flower">
</body>
</html> CSS 图片样式: 缩略图
以下示例演示如何使用 border 属性-
<html>
<head>
<style>
img {
border: 2px solid red;
border-radius: 10px;
padding: 5px;
width: 150px;
}
</style>
</head>
<body>
<img src="/css/images/pink-flower.jpg" alt="pink-flower" >
</body>
</html> CSS 图片样式: 缩略图作为链接
以下示例演示如何创建作为链接的缩略图。要创建链接，请在图像标记周围放置一个锚标记 -
<html>
<head>
<style>
img {
border: 2px solid red;
border-radius: 10px;
padding: 5px;
width: 150px;
}
img:hover {
border: 2px solid blue;
box-shadow: 0 0 5px 2px rgba(82, 241, 108, 0.5);
}
</style>
</head>
<body>
<a target="_blank" href="images/red-flower.jpg">
<img src="/css/images/pink-flower.jpg" alt="pink-flower">
</a>
</body>
</html> CSS 图片样式: 响应式图像
以下示例演示了图像如何自动调整大小以匹配屏幕尺寸−
<html>
<head>
<style>
img {
max-width: 100%;
width: 500px;
height: 300px;
}
</style>
</head>
<body>
<p>调整浏览器窗口大小以查看效果。</p>
<img src="/css/images/pink-flower.jpg" alt="Pink Flower" >
</body>
</html> CSS 图片样式: 将图像居中
以下示例演示了当屏幕尺寸更改时图像如何调整大小以匹配屏幕尺寸 −
<html>
<head>
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
height: 200px;
}
</style>
</head>
<body>
<img src="/css/images/pink-flower.jpg" alt="Pink Flower">
</body>
</html> CSS 图片样式: 具有阴影效果图片样式
以下示例演示了具有阴影效果的响应式图片样式 -
<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> CSS 图片样式: 透明图像
以下示例演示如何使用 opacity 属性创建透明图像。 opacity 属性可以设置为 0 到 1 之间的值。
"img1"的不透明度设置为 0.4，使其更透明，而"img2"设置为 0.8，使其不太透明.
<html>
<head>
<style>
.img1 {
opacity: 0.4;
width: 170px;
height: 100px;
}
.img2 {
opacity: 0.8;
width: 170px;
height: 100px;
}
</style>
</head>
<body>
<img class="img1" src="/css/images/tree.jpg" alt="Tree">
<img class="img2" src="/css/images/tree.jpg" alt="Tree">
</body>
</html> CSS 图片样式: 居中文本
以下示例演示了可以使用 filter 属性 -
<html>
<head>
<style>
.box {
display: flex;
align-items: center;
justify-content: center;
}
.center-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-40%, -40%);
font-size: 30px;
font-weight: bold;
color: blue;
}
img {
width: 100%;
height: auto;
opacity: 0.4;
height: 250px;
}
</style>
</head>
<body>
<div class="box">
<img src="/css/images/tree.jpg" alt="Tree">
<div class="center-text">Tree Image</div>
</div>
</body>
</html> CSS 图片样式: 滤镜
以下示例演示使用 transform:scaleX(-1) 属性-
<html>
<head>
<style>
img {
width: 200px;
height: 200px;
}
img:hover {
transform: scaleX(-1);
}
</style>
</head>
<body>
<img src="/css/images/see.jpg" alt="See">
</body>
</html> CSS 图片样式: 响应式图像库
以下示例演示如何创建响应式图像库，将根据浏览器窗口的大小调整图像大小 -
<html>
<head>
<style>
.gallery {
margin: 10px;
overflow: hidden;
}
.gallery img {
width: 20%;
height: auto;
float: left;
margin: 5px;
border: 2px solid black;
transition: transform 0.4s ease;
}
@media screen and (max-width: 700px) {
.gallery img {
width: 48%;
}
}
@media screen and (max-width: 1000px) {
.gallery img {
width: 30%;
}
}
</style>
</head>
<body>
<h3>调整浏览器窗口大小以查看效果。</h3>
<div class="gallery">
<img src="/css/images/tree.jpg" alt="Tree">
<img src="/css/images/orange-flower.jpg" alt="Orange">
<img src="/css/images/see.jpg" alt="See">
<img src="/css/images/red-flower.jpg" alt="Pink">
</div>
</body>
</html> CSS 图片样式: 图像模态
以下示例演示如何使用创建简单的模态图像，其中使用属性 display: none 隐藏模态。单击图像时，模式窗口将打开，显示相同的图像 -
<html>
<head>
<style>
.main-img {
width: 500px;
height: 250px;
}
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: yellow;
}
.modal-img {
display: block;
margin: auto;
width: 80%;
height: 80%;
}
.close {
position: absolute;
top: 10px;
right: 10px;
margin: 5px;
color: red;
font-size: 25px;
cursor: pointer;
}
</style>
</head>
<body>
<img src="/css/images/red-flower.jpg" class="main-img" alt="red flower" onclick="openModal()">
<div id="imgModal" class="modal" onclick="closeModal()">
<span class="close">×</span>
<img class="modal-img" src="/css/images/red-flower.jpg" alt="Modal Image">
</div>
<script>
function openModal() {
document.getElementById("imgModal").style.display = "block";
}
function closeModal() {
document.getElementById("imgModal").style.display = "none";
}
</script>
</body>
</html>