跳转到帖子
在手机APP中查看

一个更好的浏览方法。了解更多

OKCCN - XenForo & IPS Plugin Marketplace

主屏幕上的全屏APP,带有推送通知、徽章等。

在iOS和iPadOS上安装此APP
  1. 在Safari中轻敲分享图标
  2. 滚动菜单并轻敲添加到主屏幕
  3. 轻敲右上角的添加按钮。
在安卓上安装此APP
  1. 轻敲浏览器右上角的三个点菜单 (⋮) 。
  2. 轻敲添加到主屏幕安装APP
  3. 轻敲安装进行确认。
  • 选择语言

推荐的帖子

  • 行政经理

CSS Opacity


CSS Image Opacity

The opacity property specifies the opacity/transparency of an element.

The opacity property can take a value from 0.0 - 1.0:

  • 0.0 - The element will be completely transparent
  • 0.5 - The element will be 50% transparent
  • 1.0 - Default. The element will be fully opaque
Forest

opacity 0.2

Forest

opacity 0.5

Forest

opacity 1.0
(default)

Example

img {
  opacity: 0.5;
}
Try it Yourself »

Opacity and :hover

The opacity property is often used with :hover to change the opacity on mouse-over:

Northern Lights
Mountains
Italy

Example

img {
  opacity: 0.5;
}

img:hover {
  opacity: 1.0;
}
Try it Yourself »

Reversed Hover Effect

Here is an example of reversed hover effect:

Northern Lights
Mountains
Italy

Example

img:hover {
  opacity: 0.5;
}
Try it Yourself »


Transparent Boxes

When using the opacity property to add transparency to the background of an element, all child elements inherit the same transparency. This can make the text inside a transparent element hard to read:

opacity 1

opacity 0.6

opacity 0.3

opacity 0.1

Example

div {
  opacity: 0.3;
}
Try it Yourself »

Transparency using background-color

To NOT apply the transparency to child elements, you can use the background-color property with an RGBA value.

RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity for a color.

An RGBA color value is specified with: rgba(red, green, blue, alpha). Where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Tip: You will learn more about RGBA Colors in our CSS Colors Chapter.

The following example sets the opacity for the background color and not the text:

100% opacity

60% opacity

30% opacity

10% opacity

Example

div {
  background: rgba(4, 170, 109, 0.3) /* Green background with 30% opacity */
}
Try it Yourself »

Text in Transparent Box

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

Example

<html>
<head>
<style>
div.background {
  background: url(klematis.jpg) repeat;
  border: 2px solid black;
}

div.transbox {
  margin: 30px;
  background-color: rgba(255, 255, 255, 0.6);
  border: 1px solid black;
}

div.transbox p {
  margin: 5%;
  font-weight: bold;
  color: #000000;
}
</style>
</head>
<body>

<div class="background">
  <div class="transbox">
    <p>This is some text that is placed in the transparent box.</p>
  </div>
</div>

</body>
</html>
Try it Yourself »

Example explained

  • Create a <div> element (class="background") with a background image, and a border.
  • Create another <div> (class="transbox") inside the first <div>.
  • The <div class="transbox"> have a 0.6 transparent background color, and a border.
  • Inside the transparent <div>, we add some text inside a <p> element.


CSS Property

Property Description
opacity Sets the opacity level for an element

参与讨论

你可立刻发布并稍后注册。 如果你有帐户,立刻登录发布帖子。

游客
回帖…

帐户

导航

搜索

搜索

配置浏览器推送通知

Chrome (安卓)
  1. 轻敲地址栏旁的锁形图标。
  2. 轻敲权限 → 通知。
  3. 调整你的偏好。
Chrome (台式电脑)
  1. 点击地址栏中的挂锁图标。
  2. 选择网站设置。
  3. 找到通知选项并调整你的偏好。