CSS图像样式：使用样式增强页面视觉吸引力

当涉及到时，迷人的视觉效果可以使一切变得不同。图像在创造一个有吸引力的和令人难忘的用户体验方面起着至关重要的作用。

但是，你如何将你的图像从普通到非凡？这就是图像造型的作用。借助的力量，你可以释放你的创造力，将你的图片转化为吸引人的视觉元素，留下持久的印象。

在这篇文章中，我们将深入了解CSS图像造型的世界，探索许多技术和属性，将你的网页设计技能提升到新的高度。

如何在HTML中添加图片

在设置图像样式之前，首先要将其添加到HTML文档中。为此，您可以使用 <img> 标记。 <img> 标记是一个自结束标记（不需要结束标记）。它有一个 src 属性，用于指定要显示的图像的URL或文件路径。

<img src="image.jpg" alt="Description of the image">

你也可以提供一个绝对的URL或一个相对的文件路径给图片。

<img src="https://source.unsplash.com/tMHAmxLyzvA" alt="Boston city skyline">

alt 属性代表替代文本，对于辅助功能至关重要。<img> 标记还提供了两个可选属性： width 和 height。这些属性允许您以像素为单位指定图像的尺寸。

<img src="image.jpg" alt="Description of the image">

然而，一般建议避免使用 width 和 height 属性，除非你需要保持特定的图像尺寸。相反，你可以使用CSS来控制图像的大小，在中提供更多的灵活性。

img {
height: 200px;
width: 700px;
}

响应式图像样式设计

对图像的 width 和 height 属性应用特定的值可能会导致不理想的后果，比如压缩或扭曲图像。如果指定的尺寸与图像的原始长宽比不匹配，这一点尤其真实。

压缩图像

为了避免这些问题并保持适当的图像比例，这就是响应式图像造型发挥作用的地方。响应式图像样式设计确保图像适应不同的屏幕尺寸，这对响应式至关重要。

你可以通过使用 max-width 属性来实现这一点，它限制了图像的更大宽度。

img {
max-width: 100%;
height: auto;
}

响应式图像

提示：当你把 width 和 max-width 设置为 100% 时，是有区别的。使用 width: 100% 可以让图像拉伸或收缩以适应容器的宽度，而 max-width: 100% 可以确保图像不超过其原始尺寸，但仍可以缩小以适应容器。

你还可以使用来修改基于不同设备断点的图像样式。媒体查询允许你根据设备的屏幕尺寸、方向和其他特征来应用特定的CSS规则。比如说：

@media screen and (max-width: 600px) {
.my-image {
max-width: 50%;
}
}

使用object-fit属性来保持长宽比并避免缩水

有时，你需要为一个图像指定一个特定的宽度和高度。在这种情况下，你可以利用CSS的 object-fit 属性来控制图像在其指定尺寸内的行为。

object-fit 属性可以让你指定图像如何在其容器内适合，同时保持其长宽比。它可以取几个值，比如说：

• fill: 这个值会拉伸或压扁图像以完全适合其容器，可能会导致变形。
• contain: 这个值将图像按比例放大以适应容器，而不进行裁剪，保持长宽比。它确保整个图像在容器中是可见的，可能会导致空隙。
• cover: 这个值按比例缩放图像以覆盖容器，同时保持长宽比。它可能会导致裁剪图像的边缘，以确保它填满整个容器。
• none: 这个值不应用任何缩放或裁剪，图像将保留其原始尺寸，可能会溢出容器。

流行的object-fit属性样式演示

下面是一个使用object-fit属性属性的例子：

img {
width: 300px;
height: 300px;
object-fit: cover;
}

<br /> See the Pen <a href="https://www.wbolt.com/go?_=1066b008e9aHR0cHM6Ly9jb2RlcGVuLmlvL01yLUt3b25nL3Blbi9iR1FXalJC" rel="noopener noreferrer nofollow" target="_blank"><br /> Using object-fit to Maintain Aspect Ratio</a> by Mr. Kwong (<a href="https://www.wbolt.com/go?_=dd7bb526eeaHR0cHM6Ly9jb2RlcGVuLmlvL01yLUt3b25n" rel="noopener noreferrer nofollow" target="_blank">@Mr-Kwong</a>)<br /> on <a href="https://www.wbolt.com/go?_=09e7f4459caHR0cHM6Ly9jb2RlcGVuLmlv" rel="noopener noreferrer nofollow" target="_blank">CodePen</a>.<br />

用CSS创建圆角图像

给图像添加圆角可以使它们看起来更柔和，更有视觉吸引力。

使用CSS，你可以通过对图像应用 border-radius 属性来轻松实现这种效果。

下面是如何 *** 圆角图像的：

img {
border-radius: 10px;
}

在上面的例子中，我们将 border-radius 属性设置为 10px 。根据你的喜好调整这个值，以控制边角的圆度。这个值可以使用你喜欢的单位，如rem、百分比等。

圆角图像

用CSS创建圆形图像

为了使你的图像成为完美的圆形，请将 border-radius 属性与相等的宽度和高度尺寸结合起来。

下面是创建圆形图像的 *** ：

img {
border-radius: 50%;
width: 200px;
height: 200px;
}

在上面的例子中，border-radius 属性被设置为 50% ，它通过使边框曲线为图像宽度或高度的一半来创建一个圆。

注：width 和 height 属性必须有相等的尺寸，以实现一个完美的圆形图像。

你也可以使用 clip-path 属性。它使你能够为一个元素定义一个剪裁路径，创造出独特的形状。

下面是一个图像被剪成圆形的例子：

img {
clip-path: circle(50%);
width: 200px;
height: 200px;
}

<br /> See the Pen <a href="https://www.wbolt.com/go?_=da4b7193e3aHR0cHM6Ly9jb2RlcGVuLmlvL01yLUt3b25nL3Blbi9keVFXaldF" rel="noopener noreferrer nofollow" target="_blank"><br /> CodePen Home Creating Circular Images with CSS</a> by Mr. Kwong (<a href="https://www.wbolt.com/go?_=dd7bb526eeaHR0cHM6Ly9jb2RlcGVuLmlvL01yLUt3b25n" rel="noopener noreferrer nofollow" target="_blank">@Mr-Kwong</a>)<br /> on <a href="https://www.wbolt.com/go?_=09e7f4459caHR0cHM6Ly9jb2RlcGVuLmlv" rel="noopener noreferrer nofollow" target="_blank">CodePen</a>.<br />

用CSS将图像居中

在网页设计中，将图像排列在其容器的中心是一种常见的做法。有许多 *** 可以实现这一点；其中一种 *** 是将图像的 display 属性设置为 block，并应用 margin: 0 auto，这将使图像在其容器内水平居中。

img {
display: block;
margin: 0 auto;
width: 700px;
}

居中的图像

创建透明的图像

你可以使用CSS来应用所需的透明度效果，使图像透明。 opacity 属性允许你控制一个元素的透明度水平，包括图像。

值为 1 代表完全不透明（完全可见），而 0 代表完全透明（完全不可见）。

img {
opacity: 0.5;
}

在上述代码中，图像的不透明度被设置为 0.5 ，形成了半透明的效果。你可以调整不透明度的值，以达到所需的透明度水平。

透明的图像

在图像上放置文本

在图像上放置文本可以创造出具有视觉吸引力和信息量的设计。要把文字放在图片上面，你可以使用CSS定位和 z-index 的组合。

这里有一个例子：

 // HTML
<div class="2345HAO21730e7a39155bf6 image-container">
<img src="https://source.unsplash.com/tMHAmxLyzvA" alt="Boston city skyline" >
<div class="2345HAO0e7a39155bf62fba image-text">Welcome to Kinsta</div>
</div>
// CSS
.image-container {
position: relative;
}
.image-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
color: white;
font-size: 20px;
font-weight: bold;
}

在上面的代码中， image-container div 作为图像和文本叠加的容器。 position: relative 属性被应用到容器中以建立一个定位环境。然后， image-text 类被用于在容器中使用 position: absolute 来绝对定位文本，并使用 top 、 left 和 transform 属性将其居中。 z-index 属性确保文本出现在图像上方，你还可以用颜色、字体大小和字体重量进一步定制文本的外观。

请注意，具体的定位值和造型可以根据你的设计偏好和要求来调整。

<br /> See the Pen <a href="https://www.wbolt.com/go?_=e5fbc03322aHR0cHM6Ly9jb2RlcGVuLmlvL01yLUt3b25nL3Blbi9HUndtQnBL" rel="noopener noreferrer nofollow" target="_blank"><br /> Untitled</a> by Mr. Kwong (<a href="https://www.wbolt.com/go?_=dd7bb526eeaHR0cHM6Ly9jb2RlcGVuLmlvL01yLUt3b25n" rel="noopener noreferrer nofollow" target="_blank">@Mr-Kwong</a>)<br /> on <a href="https://www.wbolt.com/go?_=09e7f4459caHR0cHM6Ly9jb2RlcGVuLmlv" rel="noopener noreferrer nofollow" target="_blank">CodePen</a>.<br />

翻转图像：创建镜像效果

翻转图像可以为你的网页设计添加一个有趣的视觉元素。无论你是想创造一个镜像效果，还是想垂直或水平地翻转图像，CSS都提供了简单的技术来实现这种效果。

水平翻转

要水平翻转一个图像，你可以使用变换属性和 scaleX() 函数。 scaleX(-1) 值将图像沿水平轴翻转。

img {
transform: scaleX(-1);
}

垂直翻转

要垂直翻转一个图像，你可以使用变换属性和 scaleY() 函数。 scaleY(-1) 值将图像沿垂直轴翻转。

img {
transform: scaleY(-1);
}

对角线翻转

要创建一个对角线翻转的效果，在 transform 属性中结合 scaleX() 和 scaleY() 函数。

img {
transform: scaleX(-1) scaleY(-1);
}

在上面的代码中，图像将在水平和垂直方向上被镜像，从而产生对角线翻转的效果。

水平、垂直和对角线的图像翻转。

Info. 使用CSS翻转图像并不修改实际的图像文件，它只是改变它在网页上的显示方式。如果你需要永久地翻转图像，你必须使用编辑工具来编辑它。

为图像添加过滤器：增强视觉效果

滤波器可以改变图像的外观和感觉，让你创造独特的视觉效果。CSS提供了一系列可以应用于图像的滤镜属性，使你可以调整亮度、对比度、饱和度等。

你可以使用 filter 属性来给图像应用过滤器。这个属性接受各种滤镜功能，每一种都能改变图像的不同方面。

img {
filter: brightness(150%);
}

在上面的代码中， brightness(150%) 函数被应用于图像。这使图像的亮度增加了150%。

常用的滤镜函数

下面是一些常用的滤镜函数：

• brightness(): 调整图像的亮度。
• contrast(): 修改图像的对比度。
• saturate(): 改变图像的饱和度。
• grayscale(): 将图像转换为灰度。
• blur(): 对图像施加一个模糊效果。
• sepia(): 在图像上应用棕褐色调效果。

你可以尝试使用不同的滤镜功能和数值来实现所需的视觉效果。结合多个过滤器也可以产生更复杂的变换。

<br /> See the Pen <a href="https://www.wbolt.com/go?_=0e8bd469daaHR0cHM6Ly9jb2RlcGVuLmlvL01yLUt3b25nL3Blbi95TFFicWd6" rel="noopener noreferrer nofollow" target="_blank"><br /> Commonly Used Filter Functions</a> by Mr. Kwong (<a href="https://www.wbolt.com/go?_=dd7bb526eeaHR0cHM6Ly9jb2RlcGVuLmlvL01yLUt3b25n" rel="noopener noreferrer nofollow" target="_blank">@Mr-Kwong</a>)<br /> on <a href="https://www.wbolt.com/go?_=09e7f4459caHR0cHM6Ly9jb2RlcGVuLmlv" rel="noopener noreferrer nofollow" target="_blank">CodePen</a>.<br />

Info 不是所有的过滤器都支持所有的浏览器。在使用一个特定的过滤器之前，请使用等平台检查其在不同浏览器中的兼容性。

在图像上创建悬停覆盖层

图片上的悬停覆盖可以为你的网站带来互动性和视觉趣味。当用户在图片上悬停时，可以应用一种覆盖效果，如颜色覆盖或文字说明。

CSS提供了几种实现悬停覆盖的技术；一种 *** 是使用CSS过渡。通过过渡元素的特定属性，你可以在悬停在图像上时平滑地实现动画变化。

// HTML
<div class="2345HAO5bf62fba0629b894 image-container">
<img src="image.jpg" alt="Description of the image">
<div class="2345HAO2fba0629b894f9e3 overlay"></div>
</div>
// CSS
.image-container {
position: relative;
display: inline-block;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.3s ease;
}
.image-container:hover .overlay {
opacity: 1;
}

在上面的代码中，一个 .image-container 元素包裹着图像和一个 .overlay 元素。覆盖最初是透明的（opacity: 0），覆盖整个图像。当悬停在 .image-container 上时， .overlay 的不透明度过渡到 1 ，显示出颜色覆盖。

为了达到理想的视觉效果，你可以通过调整 background-color 和不透明度属性来定制叠加。

<br /> See the Pen <a href="https://www.wbolt.com/go?_=c6a128b164aHR0cHM6Ly9jb2RlcGVuLmlvL01yLUt3b25nL3Blbi9wb1FQWlBX" rel="noopener noreferrer nofollow" target="_blank"><br /> Creating Hover Overlays on Images</a> by Mr. Kwong (<a href="https://www.wbolt.com/go?_=dd7bb526eeaHR0cHM6Ly9jb2RlcGVuLmlvL01yLUt3b25n" rel="noopener noreferrer nofollow" target="_blank">@Mr-Kwong</a>)<br /> on <a href="https://www.wbolt.com/go?_=09e7f4459caHR0cHM6Ly9jb2RlcGVuLmlv" rel="noopener noreferrer nofollow" target="_blank">CodePen</a>.<br />

小结

用CSS设计图片，为你开辟了一个创造性的世界，使你可以增强网页的视觉吸引力和互动性。

当你用CSS设计图片时，要始终牢记可访问性、响应性和性能。

你最常使用的CSS图像样式是什么？你最感兴趣的是哪一个？请在评论中告诉我们。