CSS - 樣式影像

上一頁
下一頁

CSS 提供了多種屬性來設定 HTML 網頁中影像的樣式。在本教程中，我們將學習如何使用 CSS 屬性設定任何型別影像的樣式。

目錄


 

如何在 CSS 中設定影像樣式？

  • 設定大小：在 CSS 中，高度 和 寬度 屬性可用於調整網頁中影像的大小。
  • 設定邊框樣式：具有正確粗細和顏色的邊框使影像脫穎而出。在 CSS 中，邊框 屬性可用於設定邊框顏色、樣式和粗細。
  • 陰影效果：使用 盒陰影 屬性在影像周圍新增陰影效果可以增強影像樣式。
  • 懸停效果：互動式樣式（如懸停效果）會在使用者將滑鼠懸停在影像上時更改影像的外觀。這可能包括不透明度、大小（使用變換）的變化或應用濾鏡。
  • 響應式設計：要呈現多個影像，您可以使用 flex 或 grid 佈局系統，並使用媒體查詢根據使用者的螢幕寬度調整佈局。

設定影像尺寸

高度 和 寬度 屬性用於設定影像的尺寸。這些屬性可以具有長度（畫素、em）或百分比的值。

  • 畫素值：以畫素為單位設定尺寸
  • 百分比值：父元素尺寸的百分比以佔據。
  • 值“auto”：允許保持影像的原始縱橫比。

示例

這是一個示例，展示瞭如何設定影像的尺寸。

<!DOCTYPE html>
<html>
<body>
    <h2>Dimensions in length - 100px</h2>
    <img style="height: 100px; width: 100px;"  
         src="/css/images/orange-flower.jpg" 
         alt="orange-flower">

    <h2>Dimensions in percentage - 30%</h2>
    <!-- Occupy 30% height and width of body -->
    <img style="height: 30%; width: 30%;" 
         src="/css/images/orange-flower.jpg"  
         alt="orange-flower">

    <h2>Dimensions - auto</h2>
    <!-- Height adjusted in such a way that aspect
      ratio of image maintained for width 100px -->
    <img style="height: auto; width: 100px;"  
         src="/css/images/orange-flower.jpg" 
         alt="orange-flower">
</body>
</html>

CSS 影像不透明度

CSS 中的 不透明度 屬性用於調整元素的透明度。

不透明度值可以介於 0.0（完全透明）和 1.0（完全不透明）之間。

示例

這是一個示例

<!DOCTYPE html>
<html>
<head>
    <style>
       img {
          border: 2px solid black; 
          height: 70px;
          width: auto
       }
    </style>
</head>
<body>
    <h3>Image Opacity 0.9</h3>
    <img style="opacity: 0.9;" 
         src="/css/images/red-flower.jpg" 
         alt="opacity 0.9">

    <h3>Image Opacity 0.5</h3>
    <img style="opacity: 0.5;" 
         src="/css/images/red-flower.jpg" 
         alt="opacity 0.5">
    
    <h3>Image Opacity 0.2</h2>
    <img style="opacity: 0.2;" 
         src="/css/images/red-flower.jpg" 
         alt="opacity 0.2">
</body>
</html>

CSS 影像濾鏡

CSS 中的 filter 屬性用於將視覺效果應用於元素，例如模糊、顏色反轉、調整亮度和對比度，或應用灰度等濾鏡。

示例

此示例演示如何在 css 中新增濾鏡

<!DOCTYPE html>
<html>
<head>
    <style>
        img{
            height: 70px;
            width: auto;
        }
    </style>
</head>
<body>
    <h3>No Filter</h3>
    <img src="/css/images/scenery2.jpg">

    <h3>Filter blur</h3>
    <img style="filter: blur(5px);" 
         src="/css/images/scenery2.jpg" >

    <h3>Filter grayscale</h3>
    <img style="filter: grayscale(80%);" 
         src="/css/images/scenery2.jpg" >

    <h3>Filter saturate</h3>
    <img style="filter: saturate(40%);" 
         src="/css/images/scenery2.jpg" >
</body>
</html>

CSS 影像陰影效果

在 CSS 中，盒陰影 屬性用於在影像周圍新增陰影效果。

盒陰影由相對於元素的水平和垂直偏移量、模糊和擴充套件半徑以及顏色來描述。以下是盒陰影的語法

img { 
    box-shadow: inset horizontal vertical
                blur-radius spread-color; 
}

示例

在這個例子中，我們將建立正陰影和負陰影。

<!DOCTYPE html>
<html>
<head>
    <style>
       img{
          object-fit: none;
          height: 50px;
          width: auto;
       }
       .img2{
          box-shadow: 20px 20px 10px 
                    rgb(247, 174, 187);
       }
       .img3{
          box-shadow: -20px 20px 10px 
                    rgb(247, 174, 187);
       }
    </style>
</head>
<body>
    <h3>Box shadow on image: None</h3>
    <img src="/css/images/scenery2.jpg">

    <h3>Box shadow on image</h3>
    <img class="img2" src="/css/images/scenery2.jpg">

    <h3>Box shadow on image:negative value</h3>
    <img class="img3" src="/css/images/scenery2.jpg">
</body>
</html>

CSS 影像作為背景

CSS 允許將影像設定為另一個元素（如 div、span、body、段落等）的背景。

背景影像 屬性用於將一個或多個影像設定為背景。

注意：您可以新增多個影像作為背景。您只需使用逗號分隔影像即可。

示例

在此示例中，我們為 body 設定背景影像。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        div{
            background-color: rgba(255, 255, 255);
            opacity: 70%;
            padding: 20px;
        }
        body {
            background-image: url(/css/images/logo.png);
            height: 350px;
        }
    </style>
</head>
<body>
    <div>
        <h1>Welcome to My Website</h1>
        <p>
            This is an example of setting a 
            background image using CSS
        </p>
    </div>
</body>
</html>

CSS 影像邊框

邊框 屬性用於設定影像邊框的樣式（實線或虛線）、粗細和顏色。

CSS 中的 圓角 屬性用於定義影像邊框的圓角。透過調整 圓角 值，您可以控制元素每個角的圓潤程度或使其完全圓形。

/* Sharp edged border */
img{
    border: 5px solid black; 
}

/* Round edged border */
img{
    border: 5px solid black; 
    border-radius: 5px;
}

/* Circular Border */
img{
    border: 5px solid black; 
    border-radius: 50%;
}

示例

這是一個示例，展示瞭如何在影像中新增邊框。

<!DOCTYPE html>
<html>
<head>
    <style>
        img{
            border: 5px solid black; 
            margin-bottom: 5px;
            height: 100px;
            width: 100px;
        }
        .border-radius20{
            border-radius: 20px;
        }
        .border-radius50{
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <h4>Image Border</h4>
    <img src="/css/images/white-flower.jpg"
         alt="white-flower">

    <h4>Image Border Radius 20px</h4>
    <img src="/css/images/white-flower.jpg" 
         class="border-radius20"
         alt="white-flower">

    <h4>Image Border Radius 50%</h4>
    <img src="/css/images/white-flower.jpg" 
         class="border-radius50"
         alt="white-flower">
    </body>
</html>

CSS 影像作為邊框

CSS 還允許使用 邊框影像 屬性將影像設定為其他元素（如 div、span、body、段落等）的邊框。

示例

在此示例中，我們為 div 設定邊框影像。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        div{
            background-color: #f0f0f0;
            border: 20px solid transparent;
            border-image: url(/css/images/border.png) 40;
            padding: 20px;
        }
        body {
            height: 350px;
        }
    </style>
</head>
<body>
    <div>
        <h1>Welcome to My Website</h1>
        <p>
            This is an example of setting a 
            background image using CSS
        </p>
    </div>
</body>
</html>

在影像中定位文字

在 CSS 中，位置 屬性可用於在影像內的不同位置定位文字。

首先，我們需要將影像容器的位置屬性設定為 `position: relative`，並將文字的位置屬性設定為 `position: absolute`。現在，您可以使用 頂部、左邊、右邊 和 底部 屬性定位文字元素。

示例

<!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 {
          border: 2px solid black; 
          margin-bottom: 5px; 
          height: 200px; 
          width: 200px;
       }
    </style>
</head>
<body>
    <div>
        <h3>object-fit: fill</h3>
        <img style="object-fit: fill;" 
             src="/css/images/white-flower.jpg" 
             alt="object-fit: fill">
    </div>
    <div>
    <h3>object-fit: cover</h3>
    <img style="object-fit: cover;" 
         src="/css/images/white-flower.jpg" 
         alt="object-fit: cover">
    </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 允許在將滑鼠懸停在影像上時建立覆蓋效果影像。我們使用 transform 屬性實現此目的。

示例

以下示例顯示了兩種覆蓋效果和翻轉效果。

<!DOCTYPE html>
<html>
<head>
    <style>
    .container {
      position: relative;
      width: 50%;
    }

    .image {
      display: block;
      width: 100%;
      height: auto;
    }

    .overlay {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      height: 100%;
      width: 100%;
      opacity: 0;
      transition: .5s ease;
      background-color: #008CBA;
    }

    .container:hover .overlay {
      opacity: 1;
    }

    .text {
      color: white;
      font-size: 20px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
    }

    .middle {
      transition: .5s ease;
      opacity: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%)
    }

    .container2:hover .image {
      opacity: 0.3;
    }

    .container2:hover .middle {
      opacity: 1;
    }

    .text2 {
      background-color: #4CAF50;
      color: white;
      font-size: 16px;
      padding: 16px 32px;
    }
    .imgg:hover {
      transform: scaleX(-1);
    }
    </style>
</head>
<body>
    <h2>Fade in Overlay</h2>
    <div class="container">
        <img src="/html/images/logo.png" 
            alt="Avatar" class="image">
        <div class="overlay">
            <div class="text">
                Hello World
            </div>
        </div>
    </div>

    <h2>Fade in a Box</h2>
    <div class="container2">
        <img src="/html/images/logo.png" 
            alt="Avatar" class="image">
        <div class="middle">
        <div class="text2">
            Sign In
        </div>
        </div>
    </div>

    <h2>Hover to Flip an Image</h2>
    <img src="/html/images/logo.png" 
        class="image imgg" >

</body>
</html>
列印頁面

上一頁
下一頁
廣告