CSS - 美化图像
CSS 提供了多种属性来美化 HTML 网页中的图像。在本教程中，我们将学习如何使用 CSS 属性美化任何类型的图像。
目录
- 在 CSS 中美化图像
- CSS 图像透明度
- CSS 图像滤镜
- CSS 图像阴影效果
- CSS 图像作为背景
- CSS 图像边框
- CSS 图像作为边框
- 在图像中定位文本
- CSS 图像 Object Fit
- 居中图像
- 图像悬停覆盖效果
如何在 CSS 中美化图像？
- 设置尺寸： 在 CSS 中，height 和 width 属性可用于调整网页中图像的大小。
- 美化边框： 使用合适的厚度和颜色的边框能让图像更加突出。在 CSS 中，border 属性可用于设置边框颜色、样式和厚度。
- 阴影效果： 使用 box-shadow 属性为图像周围添加阴影效果，可以增强图像的美观度。
- 悬停效果： 交互式样式如悬停效果可以在用户将鼠标悬停在图像上时改变图像的外观。这可以包括透明度、尺寸（使用 transforms）或应用滤镜的变化。
- 响应式设计： 要渲染多个图像，可以使用 flex 或 grid 布局系统，并通过 media query 根据用户屏幕宽度调整布局。
设置图像尺寸
height 和 width 属性用于设置图像的尺寸。这些属性的值可以是长度（像素、em）或百分比。
- 像素值： 以像素设置尺寸
- 百分比值： 占父元素尺寸的百分比。
- 值 'auto'： 保持图像的原始宽高比。
示例
以下示例展示了如何为图像设置尺寸。
<!DOCTYPE html>
<html>
<body>
<h2>长度单位尺寸 - 100px</h2>
<img style="height: 100px; width: 100px;"
src="/css/images/orange-flower.jpg"
alt="orange-flower">
<h2>百分比尺寸 - 30%</h2>
<!-- 占 body 的 30% 高度和宽度 -->
<img style="height: 30%; width: 30%;"
src="/css/images/orange-flower.jpg"
alt="orange-flower">
<h2>尺寸 - auto</h2>
<!-- 高度调整为保持图像宽高比，宽度为 100px -->
<img style="height: auto; width: 100px;"
src="/css/images/orange-flower.jpg"
alt="orange-flower">
</body>
</html>
CSS 图像透明度
CSS 中的 opacity 属性用于调整元素的透明度。
opacity 值范围从 0.0（完全透明）到 1.0（完全不透明）。
示例
以下是一个示例：
<!DOCTYPE html>
<html>
<head>
<style>
img {
border: 2px solid black;
height: 70px;
width: auto
}
</style>
</head>
<body>
<h3>图像透明度 0.9</h3>
<img style="opacity: 0.9;"
src="/css/images/red-flower.jpg"
alt="opacity 0.9">
<h3>图像透明度 0.5</h3>
<img style="opacity: 0.5;"
src="/css/images/red-flower.jpg"
alt="opacity 0.5">
<h3>图像透明度 0.2</h2>
<img style="opacity: 0.2;"
src="/css/images/red-flower.jpg"
alt="opacity 0.2">
</body>
</html>
CSS 图像滤镜
CSS 中的 filter 属性用于为元素应用视觉效果，例如模糊、颜色反转、调整亮度和对比度，或应用灰度等滤镜。
示例
此示例展示如何在 CSS 中添加滤镜
<!DOCTYPE html>
<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 通过相对于元素的水平和垂直偏移量、模糊半径、扩散半径和颜色来描述。以下是 box-shadow 的语法：
img {
box-shadow: inset horizontal vertical
blur-radius spread-color;
}
示例
在此示例中，我们将创建正向和负向阴影。
<!DOCTYPE html>
<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、段落等）的背景。
background-image 属性用于设置一个或多个图像作为背景。
注意：您可以添加多个图像作为背景。只需使用逗号分隔图像即可。
示例
在此示例中，我们为 body 设置背景图像。
<!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 属性用于为图像的边框定义圆角。通过调整 border-radius 值，您可以控制元素每个角的圆润程度，或使其完全呈圆形。
/* 尖锐边缘边框 */
img{
border: 5px solid black;
}
/* 圆润边缘边框 */
img{
border: 5px solid black;
border-radius: 5px;
}
/* 圆形边框 */
img{
border: 5px solid black;
border-radius: 50%;
}
示例
以下是一个展示如何为图像添加边框的示例。
<!DOCTYPE html>
<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、段落等）设置图像作为边框。
示例
在本示例中，我们为 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 属性可用于将文本定位到图片内部的不同位置。
首先，我们需要将图片容器的 position 属性设置为 `position: relative`，将文本的 position 属性设置为 `position: absolute`。现在，你可以使用 top、left、right 和 bottom 属性来定位文本元素。
示例
<!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 Image Object Fit
object-fit 属性指定了当图片的长宽比未保持时，图片应如何调整大小。该属性会将图片调整大小以适应其容器。
示例
以下是一个展示如何使用该属性的示例。
<!DOCTYPE html>
<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>
居中图片
有几种方法可以在容器中居中图片，最流行的是使用 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 允许在鼠标悬停图像时创建覆盖效果图像。我们使用 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>淡入覆盖层</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>淡入一个盒子</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>悬停翻转图像</h2>
<img src="/html/images/logo.png"
class="image imgg" >
</body>
</html>