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>
