CSS - 图片

在本文中，我们将学习如何使用不同的 CSS 属性（如填充、边框、高度、宽度、边距等）来设置图像样式，以更改其形状、大小和布局。

圆角图像

以下示例演示了如何使用border-radius 属性创建圆角边框图像。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        img {
            width: 100px;
            height: 100px;
            border-radius: 20px;
        }
    </style>
</head>

<body>
    <img src="/css/images/pink-flower.jpg" alt="pink-flower">
</body>

</html>

圆形和椭圆形图像

以下示例演示了如何使用border-radius: 50% 属性创建圆形和椭圆形图像。当图像的高度和宽度相同时，我们将得到一个圆形图像；当它们不相同时，我们将得到椭圆形图像。

示例

<!DOCTYPE html>
<html>
<head>
    <style>
        img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <img src="/css/images/pink-flower.jpg" alt="pink-flower">
    <img src="/css/images/pink-flower.jpg" 
         style="height: 50px" alt="pink-flower">
</body>
</html>

带边框的图像

以下示例演示了如何在任何图像周围创建边框。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        img {
            border: 2px solid red;
            border-radius: 10px;
            border: 7px solid black;
            width: 150px;
        }
    </style>
</head>

<body>
      <img src="/css/images/pink-flower.jpg" alt="pink-flower">
</body>

</html>

图像滤镜

以下示例演示了使用filter 属性将不同的滤镜效果应用于图像。

示例

<!DOCTYPE html>
<html>
<head>
    <style>
        img {
            width: auto;
            height: 50px;
            margin: 10px;
        }
    </style>
</head>

<body>
    <h4>Blur Filter</h4>
    <img style="filter: blur(3px);" src="/css/images/pink-flower.jpg">

    <h4>Invert Filter</h4>
    <img style="filter: invert(110%);" src="/css/images/pink-flower.jpg">

    <h4>Saturate Filter</h4>
    <img style="filter: saturate(8);" src="/css/images/pink-flower.jpg">

    <h4>Sepia Filter</h4>
    <img style="filter: sepia(110%);" src="/css/images/pink-flower.jpg">
</body>

</html>

图像作为卡片

以下示例演示了一个响应式的宝丽来风格的图像，带有阴影效果。

<!DOCTYPE html>
<html>

<head>
    <style>
        .polaroid-image {
            width: 60%;
            height: 200px;
            background-color: white;
            box-shadow: 0 3px 6px 0 grey, 0 8px 16px 0 black;
            margin-bottom: 25px;
            margin: 20px;
        }
        img {
            width: 100%;
            height: 150px;
        }
        .box {
            text-align: center;
            padding: 5px;
        }
    </style>
</head>

<body>
    <div class="polaroid-image">
        <img src="/css/images/red-flower.jpg" alt="Flower">
        <div class="box">
            <p>Tree</p>
        </div>
    </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 中，position 属性可用于将文本定位在图像内的不同位置。

首先，我们需要将图像容器的 position 属性设置为`position: relative`，并将文本的 position 属性设置为`position: absolute`。现在，您可以使用inset 属性（如 top、bottom、right 和 left）来定位文本元素。

示例

<!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 覆盖效果 的教程。

让我们看一个图像淡入覆盖效果的示例。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .img-container {
                position: relative;
                width: 250px; 
        }
        .img-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7); 
            opacity: 0;
            transition: opacity 0.4s ease; 
        }
        .overlay-text {
            color: red;
            font-weight: bold;
            font-size: 25px;
            position: absolute;
            top: 40%;
            left: 20%;
        }
        .img-container:hover .img-overlay {
            opacity: 1;
        }
        img {
            width: 100%;
            height: 200px;
            display: block;
        }
    </style>
</head>

<body>
    <div class="img-container">
        <div class="img-overlay">
            <div class="overlay-text">TutorialsPoint</div>
        </div>
        <img src="/css/images/see.jpg" alt="See Image">
    </div>
</body>

</html>

打印页面