CSS - 样式图像

上一页
下一页

在本教程中，我们将学习如何使用不同的 CSS 属性（如填充、边框、高度、宽度、边距等）来设置图像样式以更改其形状、大小和布局。

CSS 样式图像 - 圆形图像

以下示例演示了如何使用 border-radius： 20px 属性创建圆角边框图像 -


<html>
<head>
<style>
	 	img {
	 	 	 width: 100px;
	 	 	 height: 100px;
	 	 	 border-radius: 20px;
	 	}
</style>
</head>
<body>
	 	<img src="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="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="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="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>Resize the browser window to see the effect.</p>
	 	<img src="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="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="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="images/tree.jpg" alt="Tree">
	 	<img class="img2" src="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="images/tree.jpg" alt="Tree">
	 	 	 <div class="center-text">Tree Image</div>
	 	</div>
</body>
</html>

CSS 样式图像 - 过滤器

以下示例演示了使用filter属性对图像应用不同的滤镜效果 -


<html>
<head>
<style>
	 	img {
	 	 	 width: 300px;
	 	 	 height: 300px;
	 	 	 height: auto;
	 	 	 float: left;	
	 	 	 max-width: 235px;
	 	}
	 	.blur-img {
	 	 	 filter: blur(3px);
	 	}
	 	.brightness-img {
	 	 	 filter: brightness(220%);
	 	}
	 	.grayscale-img {
	 	 	 filter: grayscale(110%);
	 	}
	 	.huerotate-img {
	 	 	 filter: hue-rotate(120deg);
	 	}
	 	.invert-img {
	 	 	 filter: invert(110%);
	 	}
	 	.shadow-img {
	 	 	 filter: drop-shadow(6px 6px 8px red);
	 	}
	 	.saturate-img {
	 	 	 filter: saturate(8);
	 	}
	 	.sepia-img {
	 	 	 filter: sepia(110%);
	 	}
</style>
</head>
<body>
	 	<img class="blur-img" src="images/pink-flower.jpg" alt="Flower">
	 	<img class="brightness-img" src="images/pink-flower.jpg" alt="Flower">
	 	<img class="grayscale-img" src="images/pink-flower.jpg" alt="Flower">
	 	<img class="huerotate-img" src="images/pink-flower.jpg" alt="Flower">
	 	<img class="invert-img" src="images/pink-flower.jpg" alt="Flower">
	 	<img class="shadow-img" src="images/pink-flower.jpg" alt="Flower">
	 	<img class="saturate-img" src="images/pink-flower.jpg" alt="Flower">
	 	<img class="sepia-img" src="images/pink-flower.jpg" alt="Flower">
</body>
</html>

CSS 样式图像 - 淡入叠加

以下示例演示了当您将鼠标悬停在图像上时，具有淡入淡出覆盖效果的图像会显示文本 -


<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: auto;
	 	 	 display: block;
	 	}
</style>
</head>
<body>
	 	<div class="img-container">
	 	 	 <div class="img-overlay">
	 	 	 	 	<div class="overlay-text">Tutorialspoint</div>
	 	 	 </div>
	 	 	 <img src="images/see.jpg" alt="See Image">
	 	</div>
</body>
</html>

CSS 样式图像 - 滑入效果

以下示例演示了当您将鼠标悬停在图像上时，图像顶部的滑入叠加效果会显示文本 -


<html>
<head>
<style>
	 	.img-container {
	 	 	 position: relative;
	 	 	 width: 250px;
	 	 	 overflow: hidden;
	 	}
	 	.img-overlay {
	 	 	 position: absolute;
	 	 	 bottom: 100%;
	 	 	 left: 0;
	 	 	 background-color: violet;
	 	 	 overflow: hidden;
	 	 	 width: 100%;
	 	 	 text-align: center;
	 	 	 height: 100%;
	 	 	 transition: 0.4s ease;
	 	}
	 	.img-container:hover .img-overlay {
	 	 	 bottom: 0;
	 	 	 height: 100%;
	 	}
	 	img {
	 	 	 width: 100%;
	 	 	 height: auto;
	 	 	 display: block;
	 	}
</style>
</head>
<body>
	 	<div class="img-container">
	 	 	 <div class="img-overlay">
	 	 	 <p>CSS Image Slide In Effect</p>
	 	 	 </div>
	 	 	 <img src="images/pink-flower.jpg" alt="Flower Image">
	 	</div>
</body>
</html>

CSS 样式图像 - 翻转图像

当您将鼠标悬停在图像上时，您可以使用转换来翻转图像：scaleX（-1） 属性 -


<html>
<head>
<style>
	 	img {
	 	 	 width: 200px;
	 	 	 height: 200px;
	 	}
	 	img:hover {
	 	 	 transform: scaleX(-1);
	 	}
</style>
</head>
<body>
	 	<img src="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>Resize the browser window to see the effect.</h3>
	 	<div class="gallery">
	 	 	 <img src="images/tree.jpg" alt="Tree">
	 	 	 <img src="images/orange-flower.jpg" alt="Orange">
	 	 	 <img src="images/see.jpg" alt="See">
	 	 	 <img src="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="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="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>
打印本页
上一页
下一页