CSS - 图像

上一页
下一页

CSS 提供了几个属性来设置 HTML 网页中的图像样式。在本教程中，我们将学习如何使用 CSS 属性为任何类型的图像设置样式。

如何在CSS中设置图像样式？

  • 设置大小：在 CSS 中，height 和 width 属性可用于调整网页中图像的大小。
  • 设置边框样式：具有适当厚度和颜色的边框使图像脱颖而出。在 CSS 中，border 属性可用于设置边框颜色、样式和粗细。
  • 阴影效果： 使用 box-shadow 属性在图像周围添加阴影效果可增强图像样式。
  • 悬停效果： 当用户将鼠标悬停在图像上时，悬停效果等交互式样式会更改图像的外观。这可能包括不透明度、大小（使用转换）或应用滤镜的更改。
  • 响应式设计： 要渲染多个图像，您可以使用 flex 或网格布局系统，通过使用媒体查询，您可以根据用户的屏幕宽度调整布局。

设置图像尺寸

height 和 width 属性用于设置图像的尺寸。这些属性的值可以是 length（pixels， em） 或百分比。

  • 像素值： 设置尺寸（以像素为单位）
  • 百分比值： 要占用的父元素尺寸的百分比。
  • 'auto' 值：允许保持图像的原始纵横比。

例子

以下示例显示了如何设置图像的尺寸。


<html>
<head>
</head>
		<body>
				<h2>Dimensions in length - 100px</h2>
				<img style="height: 100px; width: 100px;"  
						 src="/css/images/orange-flower.jpg" 
						 alt="orange-flower">

				<h2>Dimensions in percentage - 30%</h2>
				<!-- Occupy 30% height and width of body -->
				<img style="height: 30%; width: 30%;" 
						 src="/css/images/orange-flower.jpg"  
						 alt="orange-flower">

				<h2>Dimensions - auto</h2>
				<!-- Height adjusted in such a way that aspect
					ratio of image maintained for width 100px -->
				<img style="height: auto; width: 100px;"  
						 src="/css/images/orange-flower.jpg" 
						 alt="orange-flower">
		</body>
</html>

CSS 图像不透明度

CSS 中的 opacity 属性用于调整元素的透明度。

不透明度值的范围可以从 0.0（完全透明）到 1.0（完全不透明）。

例子

下面是一个示例：


<html>
<head>
<style>
	 img {
			border: 2px solid black; 
			height: 70px;
			width: auto
	 }
</style>
</head>
<body>
		<h3>Image Opacity 0.9</h3>
		<img style="opacity: 0.9;" 
				 src="/css/images/red-flower.jpg" 
				 alt="opacity 0.9">

		<h3>Image Opacity 0.5</h3>
		<img style="opacity: 0.5;" 
				 src="/css/images/red-flower.jpg" 
				 alt="opacity 0.5">
	  
		<h3>Image Opacity 0.2</h2>
		<img style="opacity: 0.2;" 
				 src="/css/images/red-flower.jpg" 
				 alt="opacity 0.2">
</body>
</html>

CSS 图像过滤器

CSS 中的 filter 属性用于将视觉效果应用于元素，例如模糊、反转颜色、调整亮度和对比度，或应用灰度等滤镜。

例

这个例子展示了如何在css中添加过滤器


<html>
<head>
		<style>
				img{
						height: 70px;
						width: auto;
				}
		</style>
</head>
<body>
		<h3>No Filter</h3>
		<img src="/css/images/scenery2.jpg">

		<h3>Filter blur</h3>
		<img style="filter: blur(5px);" 
				 src="/css/images/scenery2.jpg" >

		<h3>Filter grayscale</h3>
		<img style="filter: grayscale(80%);" 
				 src="/css/images/scenery2.jpg" >

		<h3>Filter saturate</h3>
		<img style="filter: saturate(40%);" 
				 src="/css/images/scenery2.jpg" >
</body>
</html>

CSS 图像阴影效果

在 CSS 中，box-shadow 属性用于在图像周围添加阴影效果。

框阴影由相对于元素的水平和垂直偏移、模糊和展开半径以及颜色来描述。以下是 box-shadow 的语法：


img { 
		box-shadow: inset horizontal vertical
								blur-radius spread-color; 
}

例

在此示例中，我们将创建正面和负面阴影。


<html>
<head>
<style>
	 img{
			object-fit: none;
			height: 50px;
			width: auto;
	 }
	 .img2{
			box-shadow: 20px 20px 10px 
								rgb(247, 174, 187);
	 }
	 .img3{
			box-shadow: -20px 20px 10px 
								rgb(247, 174, 187);
	 }
</style>
</head>
<body>
		<h3>Box shadow on image: None</h3>
		<img src="/css/images/scenery2.jpg">

		<h3>Box shadow on image</h3>
		<img class="img2" src="/css/images/scenery2.jpg">

		<h3>Box shadow on image:negative value</h3>
		<img class="img3" src="/css/images/scenery2.jpg">
</body>
</html>

CSS图像作为背景

CSS 允许将图像设置为另一个元素（如 div、span、body、paragraph 等）的背景。

background-image 属性用于将一个或多个图像设置为背景。

注意：您可以添加多张图片作为背景。您只需要使用逗号分隔图像即可。

例

在这个例子中，我们为身体设置背景图像。


<!DOCTYPE html>
<html lang="en">
<head>
<style>
		div{
				background-color: rgba(255, 255, 255);
				opacity: 70%;
				padding: 20px;
		}
		body {
				background-image: url(/css/images/logo.png);
				height: 350px;
		}
</style>
</head>
<body>
		<div>
				<h1>Welcome to My Website</h1>
				<p>
						This is an example of setting a 
						background image using CSS
				</p>
		</div>
</body>
</html>  

CSS 图像边框

border 属性用于设置图像边框的样式（实线或虚线）、粗细和颜色。

CSS 中的 border-radius 属性用于定义图像边框的圆角。通过调整边框半径值，您可以控制元素的每个角的圆度或使它们完全圆形。


/* Sharp edged border */
img{
		border: 5px solid black; 
}

/* Round edged border */
img{
		border: 5px solid black; 
		border-radius: 5px;
}

/* Circular Border */
img{
		border: 5px solid black; 
		border-radius: 50%;
}

例

以下示例显示了如何向图像添加边框。


<html>
<head>
<style>
		img{
				border: 5px solid black; 
				margin-bottom: 5px;
				height: 100px;
				width: 100px;
		}
		.border-radius20{
				border-radius: 20px;
		}
		.border-radius50{
				border-radius: 50%;
		}
</style>
</head>
<body>
		<h4>Image Border</h4>
		<img src="/css/images/white-flower.jpg"
				 alt="white-flower">

		<h4>Image Border Radius 20px</h4>
		<img src="/css/images/white-flower.jpg" 
				 class="border-radius20"
				 alt="white-flower">

		<h4>Image Border Radius 50%</h4>
		<img src="/css/images/white-flower.jpg" 
				 class="border-radius50"
				 alt="white-flower">
		</body>
</html>

CSS 图像作为边框

CSS 还允许使用 border-image 属性将图像设置为其他元素的边框，如 div、span、body、paragraph 等。

例

在此示例中，我们为 div 设置边框图像。


<!DOCTYPE html>
<html lang="en">
<head>
<style>
		div{
				background-color: #f0f0f0;
				border: 20px solid transparent;
				border-image: url(/css/images/border.png) 40;
				padding: 20px;
		}
		body {
				height: 350px;
		}
</style>
</head>
<body>
		<div>
				<h1>Welcome to My Website</h1>
				<p>
						This is an example of setting a 
						background image using CSS
				</p>
		</div>
</body>
</html>  

在图像中放置文本

在CSS 中，position属性可用于将文本放置在图像中的不同位置。

首先，我们需要将图像容器的位置属性设置为“位置：相对”，将文本的位置属性设置为“位置：绝对”。现在，您可以使用 top，left，right 和 bottom 属性来定位文本元素。

例子


<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 图像对象拟合

object-fit 属性指定在不保持图像的纵横比的情况下应如何调整图像的大小。此属性调整图像的大小以适合其容器。

例子

以下示例演示如何使用此属性。


<html>
<head>
<style>
	 img {
			border: 2px solid black; 
			margin-bottom: 5px; 
			height: 200px; 
			width: 200px;
	 }
</style>
</head>
<body>
		<div>
				<h3>object-fit: fill</h3>
				<img style="object-fit: fill;" 
						 src="/css/images/white-flower.jpg" 
						 alt="object-fit: fill">
		</div>
		<div>
		<h3>object-fit: cover</h3>
		<img style="object-fit: cover;" 
				 src="/css/images/white-flower.jpg" 
				 alt="object-fit: cover">
		</div>
</body>
</html>

将图像居中

有几种方法可以在容器内将图像居中，最流行的方法是使用带有 justify-content 和 align-items 属性的 flex 布局。

  • 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 允许将鼠标悬停在它们上时创建叠加效果图像。我们使用 transform 属性来实现这一点。

例

以下示例显示了两个叠加效果和翻转效果。


<!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: white;
	font-size: 20px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}

.middle {
	transition: .5s ease;
	opacity: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%)
}

.container2:hover .image {
	opacity: 0.3;
}

.container2:hover .middle {
	opacity: 1;
}

.text2 {
	background-color: #4CAF50;
	color: white;
	font-size: 16px;
	padding: 16px 32px;
}
.imgg:hover {
	transform: scaleX(-1);
}


</style>
</head>
<body>
		<h2>Fade in Overlay</h2>
		<div class="container">
				<img src="/html/images/logo.png" 
						alt="Avatar" class="image">
				<div class="overlay">
						<div class="text">
								Hello World
						</div>
				</div>
		</div>

		<h2>Fade in a Box</h2>
		<div class="container2">
				<img src="/html/images/logo.png" 
						alt="Avatar" class="image">
				<div class="middle">
				<div class="text2">
						Sign In
				</div>
				</div>
		</div>

		<h2>Hover to Flip an Image</h2>
		<img src="/html/images/logo.png" 
				class="image imgg" >

</body>
</html>
本页
上一页
下一页