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>

列印頁面