Cara menggunakan javascript background image opacity

Question

CSS Opacity / Transparency

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

Table of Contents Show

CSS Opacity / Transparency
Transparent Image
Transparent Hover Effect
Example explained
Transparent Box
Transparency using RGBA
Text in Transparent Box
Example explained
Basic usage
Linear gradients
Applying conditionally
Hover, focus, and other states
Breakpoints and media queries
Using custom values
Customizing your theme
Arbitrary values

Transparent Image

The opacity property can take a value from 0.0 - 1.0. The lower the value, the more transparent:

opacity 0.2

opacity 0.5

opacity 1
(default)

Transparent Hover Effect

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

Example explained

The first CSS block is similar to the code in Example 1. In addition, we have added what should happen when a user hovers over one of the images. In this case we want the image to NOT be transparent when the user hovers over it. The CSS for this is opacity:1;.

When the mouse pointer moves away from the image, the image will be transparent again.

An example of reversed hover effect:

Transparent Box

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

Transparency using RGBA

If you do not want to apply opacity to child elements, like in our example above, use RGBA color values. The following example sets the opacity for the background color and not the text:

You learned from our CSS Colors Chapter, that you can use RGB as a color value. In addition to RGB, you can use an RGB color value with an alpha channel (RGBA) - which specifies the opacity for a color.

An RGBA color value is specified with: rgba(red, green, blue, alpha). 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.

Example

div {
background: rgba(76, 175, 80, 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: #ffffff;
border: 1px solid black;
opacity: 0.6;
}

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

First, we create a <div> element (class="background") with a background image, and a border.

Then we create another <div> (class="transbox") inside the first <div>.

The <div class="transbox"> have a background color, and a border - the div is transparent.

Inside the transparent <div>, we add some text inside a <p> element.

Basic usage

Linear gradients

To give an element a linear gradient background, use one of the bg-gradient-{direction} utilities, in combination with the gradient color stop utilities.

<div class="h-14 bg-gradient-to-r from-cyan-500 to-blue-500"></div>
<div class="h-14 bg-gradient-to-r from-sky-500 to-indigo-500"></div>
<div class="h-14 bg-gradient-to-r from-violet-500 to-fuchsia-500"></div>
<div class="h-14 bg-gradient-to-r from-purple-500 to-pink-500"></div>

Applying conditionally

Hover, focus, and other states

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:bg-gradient-to-r to only apply the bg-gradient-to-r utility on hover.

<div class="bg-gradient-to-l hover:bg-gradient-to-r">
  <!-- ... -->
</div>

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

Breakpoints and media queries

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:bg-gradient-to-r to apply the bg-gradient-to-r utility at only medium screen sizes and above.

<div class="bg-gradient-to-l md:bg-gradient-to-r">
  <!-- ... -->
</div>

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.

Using custom values

Customizing your theme

By default, Tailwind includes background image utilities for creating linear gradient backgrounds in eight directions.

You can add your own background images by editing the theme.backgroundImage section of your tailwind.config.js file:

These don’t just have to be gradients — they can be any background images you need.

Learn more about customizing the default theme in the theme customization documentation.

Arbitrary values

If you need to use a one-off background-image value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.

<div class="bg-[url('/img/hero-pattern.svg')]">
  <!-- ... -->
</div>

Learn more about arbitrary value support in the arbitrary values documentation.

kode javascript Image opacity online Background image HTML Background-size CSS Background-position CSS Mdn opacity Background-repeat

Cara menggunakan javascript background image opacity

CSS Opacity / Transparency

Transparent Image

Transparent Hover Effect

Example explained

Transparent Box

Transparency using RGBA

Example

Text in Transparent Box

Example

Example explained

​Basic usage

​Linear gradients

​Applying conditionally

​Hover, focus, and other states

​Breakpoints and media queries

​Using custom values

​Customizing your theme

​Arbitrary values

Pos Terkait

Periklanan

BERITA TERKINI

Toplist Popular

Periklanan

Terpopuler

Token Data

Periklanan

Tentang Kami

Legal

Dukungan

Social

Basic usage

Linear gradients

Applying conditionally

Hover, focus, and other states

Breakpoints and media queries

Using custom values

Customizing your theme

Arbitrary values