CSS 图片样式

📁 bt365体育开户 ⌛ 2026-11-08 01:44:09 👤 admin 👁️‍🗨️ 7261 💖 996

img {

width: 200px;

height: 200px;

border-radius: 10px;

}

浏览器输出

在上面的示例中，border-radius 属性将图片的圆角设置为 10px 的 border-radius。

我们可以通过添加

border-radius: 50%;

浏览器输出

居中图片

我们可以借助 display 和 margin 属性将图片居中到容器中。例如，

img {

width: 150px;

display: block;

margin-left: auto;

margin-right: auto;

}

浏览器输出

在上面的例子中：

display: block 将图片转换为块级元素

margin-left: auto 和 margin-right: auto 通过在其周围创建相等的空间来水平居中图片

注意：块级元素开始于新的一行，并占据父元素的全部可用宽度。

创建响应式图片

max-width 属性用于使图片响应式。例如，

img {

max-width: 500px;

height: auto;

}

浏览器输出

这里，

max-width: 500px 为图片设置了 500px 的最大宽度

height: auto 保持图片的宽高比

注意：请注意，max-width 属性只会缩小图片。如果图片小于其容器，它不会放大以填充容器。

创建缩略图

border 属性用于创建缩略图。例如，

img {

max-width: 150px;

border: 1px solid black;

padding: 10px;

}

浏览器输出

在这里，border 属性在图片周围添加了 1px 的 solid black 边框，使其外观像缩略图。

创建透明图片

opacity 属性为图片添加透明度。

opacity 属性的值范围是 0.0 到 1.0。值越低表示图片越透明。

让我们看一个例子，

HTML

CSS

img {

max-width: 150px;

}

.first-image {

opacity: 0.1;

}

.second-image {

opacity: 0.5;

}

.third-image {

opacity: 1;

}

div {

display: inline-block;

margin-right: 20px;

}

浏览器输出

上面的示例显示了不同不透明度值的图片。

添加背景图片

我们可以添加一张图片作为元素的背景。例如，

HTML

CSS

Adding a background image

body {

background-image: url("https://images.unsplash.com/photo-1621091211034-53136cc1eb32?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80");

}

浏览器输出

添加背景图片

在上面的示例中，background-image 属性将背景图片添加到网页的正文。

创建图片卡片

让我们使用不同的 CSS 属性创建一个图片卡片。

HTML

CSS

.image-card {

max-width: 200px;

box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);

border-radius: 8px;

overflow: hidden;

}

.image-card img {

width: 100%;

height: auto;

}

.card-content {

text-align: center;

}

浏览器输出

上面的示例创建了一个简单的图片卡片。

创建图片文字叠加

我们可以使用不同的 CSS 属性将文本放置和定位在图片上。例如，

HTML

CSS

.container {

position: relative;

}

.top-left {

position: absolute;

top: 5px;

left: 10px;

color: white;

}

.top-right {

position: absolute;

top: 5px;

right: 10px;

color: white;

}

.bottom-left {

position: absolute;

bottom: 5px;

left: 10px;

color: white;

}

.bottom-right {

position: absolute;

bottom: 5px;

right: 10px;

color: white;

}

.center {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

color: white;

}

img {

width: 100%;

height: 200px;

}

浏览器输出

上面的示例显示了文本在图片上的不同位置。

注意：要将任何内部子元素绝对定位在容器内，请务必将容器的 position 设置为 relative。

这是因为绝对定位的元素是相对于其最近的已定位祖先进行定位的。

Object Fit

object-fit 属性指定了图片如何在不影响其宽高比的情况下适应容器。

object-fit 属性可以接受多个值，例如

fill：拉伸图片以填充整个容器

contain：缩放图片以适合容器，同时保持其宽高比

cover：缩放图片以覆盖整个容器

scale-down：将图片缩小到其最小版本

none：不调整图片大小

让我们看一个例子，

HTML

CSS

Object-Fit: Fill

Object-Fit: Cover

Object-Fit: Scale Down

Object-Fit: Contain

img {

width: 200px;

height: 200px;

border: 2px solid #333;

margin: 10px;

}

img.fill {

object-fit: fill;

}

img.cover {

object-fit: cover;

}

img.scale-down {

object-fit: scale-down;

}

img.contain {

object-fit: contain;

}

浏览器输出

Object-Fit: Fill

Object-Fit: Cover

Object-Fit: Scale Down

Object-Fit: Contain

上面的示例显示了 object-fit 属性的不同值。

图片滤镜

filter 属性用于在元素上创建各种视觉效果。例如，

HTML

CSS

div {

display: inline-block;

margin: 12px;

}

img {

max-width: 200px;

}

img.blur {

filter: blur(3px);

}

img.brightness {

filter: brightness(150%);

}

img.contrast {

filter: contrast(200%);

}

img.sepia {

filter: sepia(100%);

}

img.greyscale {

filter: greyscale(100%);

}

img.huerotate {

filter: hue-rotate(90deg);

}

img.invert {

filter: invert(150%);

}

img.saturate {

filter: saturate(5);

}

浏览器输出

filter: blur(3px);

filter: brightness(150%);

filter: contrast(200%);

filter: sepia(100%)

filter: greyscale(100%)

filter: hue-rotate(90deg)

filter: invert(150%)

filter: saturate(5)

上面的示例显示了不同的图片滤镜。

图片悬停叠加

使用 :hover 伪类选择器可以在悬停图片时更改叠加效果。例如，

HTML

CSS

.container {

max-width: 200px;

border: 1px solid black;

position: relative;

overflow: hidden;

margin-bottom: 12px;

}

.overlay {

width: 100%;

height: 100%;

background-color: purple;

position: absolute;

transition: all 0.7s ease;

}

.overlay-text {

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

color: white;

font-weight: bold;

}

img {

width: 100%;

height: 100%;

object-fit: cover;

}

/* creating the left overlay */

.overlay-left {

left: -100%;

top: 0;

}

.container:hover .overlay-left {

left: 0;

}

/* creating the right overlay */

.overlay-right {

right: -100%;

top: 0;

}

.container:hover .overlay-right {

right: 0;

}

/* creating the bottom overlay */

.overlay-bottom {

bottom: -100%;

left: 0;

}

.container:hover .overlay-bottom {

bottom: 0;

}

/* creating the top overlay */

.overlay-top {

top: -100%;

left: 0;

}

.container:hover .overlay-top {

top: 0;

}

浏览器输出

向左滑动

向右滑动

向上滑动

向下滑动

上面的示例显示了悬停图片时的不同叠加效果。

翻转图片

让我们看看如何翻转图片。

HTML

CSS

div {

display: inline-block;

margin: 12px;

}

img {

width: 200px;

}

img.horizontal-flip:hover {

transform: scaleX(-1);

}

img.vertical-flip:hover {

transform: scaleY(-1);

}

img.diagonal-flip:hover {

transform: scaleX(-1) scaleY(-1);

}

浏览器输出

水平翻转

垂直翻转

对角线翻转

上面的示例显示了翻转图片的各种方法。