CSS - 图片

原创

admin 4个月前 (08-07) 阅读数 21 #CSS

CSS - 图片

在本文中，我们将学习如何使用不同的CSS属性（如padding、borders、height、width、margins等）来设置图片样式，改变其形状、大小和布局。

圆角图片

下面的示例演示了如何使用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: 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>模糊滤镜</h4>
    <img style="filter: blur(3px);" src="/css/images/pink-flower.jpg">

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

    <h4>饱和度滤镜</h4>
    <img style="filter: saturate(8);" src="/css/images/pink-flower.jpg">

    <h4>复古滤镜</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: 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>树</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。现在，您可以使用top、bottom、right和left等inset属性来定位文本元素。

示例

<!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">
            居中文字
        </h3>
        <h3 class="top-left">
            左上角文字
        </h3>
        <h3 class="top-right">
            右上角文字
        </h3>
        <h3 class="bottom-left">
            左下角文字</h3>
        <h3 class="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">教程点</div>
        </div>
        <img src="/css/images/see.jpg" alt="See Image">
    </div>
</body>

</html>