css img不透明度如何設置-css教學-PHP中文網

首頁

web前端

css教學

css img不透明度如何設置

藏色散人

Dec 21, 2020 am 09:57 AM

css

css img不透明度的設定方法：先建立一個HTML和css範例檔案；然後透過給指定img設定樣式為「img{opacity:0.4;filter:alpha(opacity=40);}」即可。

css img不透明度如何設置

本教學操作環境：Windows7系統、HTML5&&CSS3版本，此方法適用於所有品牌電腦。

推薦：《css影片教學》

透過 CSS 建立透明圖片是很容易的。

註解：CSS opacity 屬性是 W3C CSS 推薦標準的一部分。

建立透明圖像 - Hover 效果

在本例中，當使用者將滑鼠指標移到圖片上時，會改變圖片的透明度。

建立文字在背景圖像上的透明框

本範例建立了一個包圍文字的半透明框。

實例 1 - 建立透明圖片

定義透明效果的 CSS3 屬性是 opacity。

首先，我們將展示如何透過 CSS 來建立透明圖片。

常規圖片：

css img不透明度如何設置

具有透明度的相同圖片：

css img不透明度如何設置

##請看下面的CSS：

img
{
opacity:0.4;
filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
}

登入後複製

IE9, Firefox, Chrome, Opera 和Safari 使用屬性opacity 來設定透明度。 opacity 屬性能夠設定的值從 0.0 到 1.0。值越小，越透明。

IE8 以及更早的版本使用濾鏡 filter:alpha(opacity=x)。 x 能夠取的值從 0 到 100。值越小，越透明。

實例2 - 影像透明度- Hover 效果

請把滑鼠指標移到影像上：

css img不透明度如何設置

CSS 是這樣的：

img
{
opacity:0.4;
filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* 针对 IE8 以及更早的版本 */
}

登入後複製

第一個CSS 程式碼區塊類似實例1 中的程式碼。此外，我們已經設定了當滑鼠指標位於圖像上時的樣式。在這個例子中，當指標移動到影像上時，我們希望影像是不透明的。

對應的 CSS 是：opacity=1。

IE8 以及更早的瀏覽器：filter:alpha(opacity=100)。

當滑鼠指標移出影像後，影像會再次透明。

實例3 - 透明框中的文字

This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box.

登入後複製

css img不透明度如何設置

#原始程式碼是這樣的：

<!DOCTYPE html>
<html>
<head>
<style>
div.background
{
  width: 400px;
  height: 266px;
  background: url(&#39;/i/tulip_peach_blossom_w.jpg&#39;) no-repeat;
  border: 1px solid black;
}
div.transbox
{
  width: 338px;
  height: 204px;
  margin:30px;
  background-color: #ffffff;
  border: 1px solid black;
  /* for IE */
  filter:alpha(opacity=60);
  /* CSS3 standard */
  opacity:0.6;
}
div.transbox p
{
  margin: 30px 40px;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>
</body>
</html>

登入後複製

首先，我們建立一個div 元素(class="background")，它有固定的高度和寬度、背景影像，以及邊框。然後我們在第一個 div 內建立稍小的 div (class="transbox")。 "transbox" div 有固定的寬度、背景色和邊框 - 且它是透明的。在透明 div 內部，我們在 p 元素中加入了一些文字。

以上是css img不透明度如何設置的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7538

CakePHP 教程

1380

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

HTML，CSS和JavaScript的角色：核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

vue中怎麼用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分為五個步驟：安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選：自定義樣式。可選：使用插件。

bootstrap怎麼寫分割線 Apr 07, 2025 pm 03:12 PM

創建 Bootstrap 分割線有兩種方法：使用標籤，可創建水平分割線。使用 CSS border 屬性，可創建自定義樣式的分割線。

bootstrap怎麼調整大小 Apr 07, 2025 pm 03:18 PM

要調整 Bootstrap 中元素大小，可以使用尺寸類，具體包括：調整寬度：.col-、.w-、.mw-調整高度：.h-、.min-h-、.max-h-

bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。

bootstrap怎麼設置框架 Apr 07, 2025 pm 03:27 PM

要設置 Bootstrap 框架，需要按照以下步驟：1. 通過 CDN 引用 Bootstrap 文件；2. 下載文件並將其託管在自己的服務器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根據需要編譯 Sass/Less；5. 導入定製文件（可選）。設置完成後，即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。