helixxchi

テクノロジープログラミング一般的なカテゴリ

Css背景画像の不透明度-背景画像の不透明度を追加するためのベスト10の方法（CSSを使用）

23 9月 2021

css背景画像の不透明度：–ここでは、CSSの不透明度/透明度、透明ホバー効果、透明ボックス、RGBAを使用した透明度、透明ボックス内のテキスト、背景画像の不透明度cssについて学習できます。また、画像が完全に塗りつぶされているように見えるデフォルトの不透明度1.0。 0.1と同様に、テキストでほぼ透明になり、より明確に表示されます。

css背景画像の不透明度

css背景画像の不透明度を使用する

透明なテキスト
透明ボックス
透明なボーダー
透明色Div
透明画像
透明性

背景の不透明度の構文

opacity: 1.0  
opacity: 0.6 
opacity: 0.1 
opacity: inherit
filter: alpha(opacity=100);
zoom: 1;

opacity: 1.0

opacity: 0.6

opacity: 0.1

opacity: inherit

filter: alpha(opacity=100);

zoom: 1;

例1：不透明度：0.4;

<!DOCTYPE html>
<html>
<head>
<style>
img {
  opacity: 0.4;
}
</style>
</head>
<body>

<h2>Image Transparency</h2>
<p>background image opacity css</p>

<p>Image with 40% opacity:</p>
<img src="your_image_full_path.jpg" alt="web Devloper" width="200" height="300">

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

img {

opacity: 0.4;

}

</style>

</head>

<body>

<h2>Image Transparency</h2>

<p>background image opacity css</p>

<p>Image with 40% opacity:</p>

</body>

</html>

お見逃しなく：グラデーションオーバーレイCSS

透明なホバー効果

<!DOCTYPE html>
<html>
<head>
<style>
img {
  opacity: 0.6;
}

img:hover {
  opacity: 2.0;
}
</style>
</head>
<body>

<h2>Image Transparency - background image opacity css</h2>
<p>css background image opacity opacity on mouse-over:</p>
<img src="php_logo.jpg" alt="PHP" width="200" height="320">
<img src="laravel_logo.jpg" alt="Laravel" width="200" height="320">
<img src="angularjs_logo.jpg" alt="Angularjs" width="200" height="320">

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

img {

opacity: 0.6;

}

img:hover {

opacity: 2.0;

}

</style>

</head>

<body>

<h2>Image Transparency - background image opacity css</h2>

<p>css background image opacity opacity on mouse-over:</p>

</body>

</html>

透明な箱の例

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: #3d3d3d;
  padding: 15px;
}

div.tutorial {
  opacity: 0.1;
}

div.article {
  opacity: 0.3;
}

div.blog {
  opacity: 0.6;
}
</style>
</head>
<body>

<h2>Transparent Box - example</h2>
<p>Transparent Box Example:</p>

<div class="tutorial"><p>tutorial opacity 0.1</p></div>
<div class="article"><p>article opacity 0.3</p></div>
<div class="blog"><p>blog opacity 0.6</p></div>
<div><p>Simple opacity 1 (default)</p></div>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

div {

background-color: #3d3d3d;

padding: 15px;

}

div.tutorial {

opacity: 0.1;

}

div.article {

opacity: 0.3;

}

div.blog {

opacity: 0.6;

}

</style>

</head>

<body>

<h2>Transparent Box - example</h2>

<p>Transparent Box Example:</p>

<div class="tutorial"><p>tutorial opacity 0.1</p></div>

<div class="article"><p>article opacity 0.3</p></div>

<div class="blog"><p>blog opacity 0.6</p></div>

<div><p>Simple opacity 1 (default)</p></div>

</body>

</html>

透明なボックス内のテキスト

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

div.cartbox {
  margin: 30px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity: 0.6;
}

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

<div class="background">
  <div class="cartbox">
    <p>Welcome To Happy Coding free Download Source code.</p>
  </div>
</div>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

div.background {

background: url(wallpaper.jpg) repeat;

border: 2px solid black;

}

div.cartbox {

margin: 30px;

background-color: #ffffff;

border: 1px solid black;

opacity: 0.6;

}

div.cartbox p {

margin: 5%;

font-weight: bold;

color: #000000;

}

</style>

</head>

<body>

<p>Welcome To Happy Coding free Download Source code.</p>

</div>

</body>

</html>

CSS背景画像の不透明度を変更する方法

個別の画像要素の使用と配置

<div class="example-wrap">
  <img
    class="example-bg"
    src="your_domain_name/path/images/blog_logo.png"
    alt=""
  >
  <div class="example-content">
    <h2>Welcome To Pakainfo</h2>
  </div>
</div>

<style>
.example-wrap {
  overflow: hidden;
  position: relative;
}

.example-bg {
  opacity: 0.6;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
}

.example-content {
  position: relative;
}
</style>

<img

class="example-bg"

src="your_domain_name/path/images/blog_logo.png"

alt=""

<h2>Welcome To Pakainfo</h2>

</div>

<style>

.example-wrap {

overflow: hidden;

position: relative;

}

.example-bg {

opacity: 0.6;

position: absolute;

left: 0;

top: 0;

width: 100%;

height: auto;

}

.example-content {

position: relative;

}

</style>

CSS疑似要素の使用

<div class="example-wrap">
  <div class="example-content">
    <h2>Welcome To Happy Coding free Download Source code.</h2>
  </div>
</div>

<style>
.example-wrap {
  position: relative;
}

.example-wrap:before {
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  background-image: url('your_domain_name/path/images/blog_logo.png');
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: cover;
}

.example-content {
  position: relative;
}
</style>

<h2>Welcome To Happy Coding free Download Source code.</h2>

</div>

<style>

.example-wrap {

position: relative;

}

.example-wrap:before {

content: ' ';

display: block;

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

opacity: 0.6;

background-image: url('your_domain_name/path/images/blog_logo.png');

background-repeat: no-repeat;

background-position: 50% 0;

background-size: cover;

}

.example-content {

position: relative;

}

</style>

子要素に影響を与えずに背景画像の不透明度を設定します

<div><span>Pakainfo.com.</span></div>

div {
  width: 600px;
  height: 300px;
  background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), url("full_image_path/image_name.jpg");
}
span {
  background: black;
  color: white;
}

<div><span>Pakainfo.com.</span></div>

div {

width: 600px;

height: 300px;

background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), url("full_image_path/image_name.jpg");

}

span {

background: black;

color: white;

}

CSS画像の不透明度（透明度）

<!DOCTYPE html>
<html>
<head>
  <style>
    img {
      opacity: 0.3;
      filter: alpha(opacity=30); /* For IE 8 & 9 (more valid) */
    }
  </style>
</head>
<body>
  <img src="img/php_logo.png" width="245" height="145" alt="PHP Website Logo">
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

img {

opacity: 0.3;

filter: alpha(opacity=30); /* For IE 8 & 9 (more valid) */

}

</style>

</head>

<body>

</body>

</html>

透明色の作成方法Div

<!DOCTYPE html>
<html >
<head>
  <style type="text/css">
    .demo{
      width:250px;
      height:250px;
      background:green;
      border: 1px solid black;
      float:left;
      align:center;
      opacity:1.0;
    }
    .example{
      width:250px;
      height:250px;
      background:green;
      border: 1px solid black;
      float:left;
      align:center;
      opacity:0.5;
    }
  </style>
</head>
<body>
  <div class="demo">
    opacity 1.0
  </div>
  <div class="example" >
    opacity 0.5
  </div>
</body>
</html>

<!DOCTYPE html>

<html >

<head>

.demo{

width:250px;

height:250px;

background:green;

border: 1px solid black;

float:left;

align:center;

opacity:1.0;

}

.example{

width:250px;

height:250px;

background:green;

border: 1px solid black;

float:left;

align:center;

opacity:0.5;

}

</style>

</head>

<body>

opacity 1.0

</div>

opacity 0.5

</div>

</body>

</html>

透明なテキスト

<!DOCTYPE html>
<html>
<head>
  <style>
    .demo
    {
      width:200px;
      height:190px;
      background: url(images/pakainfo_logo.png) no-repeat;
      border:5px solid #3d3d3d;
      font-size: 65px;
      color:rgba(255,255,255,.5);
      font-weight: 900;
    }
    .trBorder {
      height: 105px;
      width: 105px;
      margin: 25px;
      border: 8px solid rgba(255,255,255,.5);
    }
  </style>
</head>
<body>
  <div class="demo">
  <br>
  Duck
  </div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

.demo

{

width:200px;

height:190px;

background: url(images/pakainfo_logo.png) no-repeat;

border:5px solid #3d3d3d;

font-size: 65px;

color:rgba(255,255,255,.5);

font-weight: 900;

}

.trBorder {

height: 105px;

width: 105px;

margin: 25px;

border: 8px solid rgba(255,255,255,.5);

}

</style>

</head>

<body>

<br>

Duck

</div>

</body>

</html>

透明ボックス

<!DOCTYPE html>
<html>
<head>
  <style>
    .demo
    {
      width:200px;
      height:200px;
      background: url(img/demo.png) no-repeat;
      border:5px solid #000000;
      font-size: 45px;
      font-weight: 900;
      color:blue;
    }
    .createBrder {
      height: 150px;
      width: 150px;
      margin: 20px;
      background: rgba(255,255,255,.5);
    }
  </style>
</head>
<body>
  <div class="demo">
    <div class="createBrder" align=center>
   	Welcome To Pakainfo
    </div>
  </div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

.demo

{

width:200px;

height:200px;

background: url(img/demo.png) no-repeat;

border:5px solid #000000;

font-size: 45px;

font-weight: 900;

color:blue;

}

.createBrder {

height: 150px;

width: 150px;

margin: 20px;

background: rgba(255,255,255,.5);

}

</style>

</head>

<body>

Welcome To Pakainfo

</div>

</body>

</html>

私はあなたがについてのアイデアを得ることを願っています css背景画像の不透明度。
フィードバックをお願いします infinityknow.com。
この記事に関する貴重なフィードバック、質問、コメントはいつでも歓迎します。
この投稿を楽しんで気に入った場合は、共有することを忘れないでください。

参考資料 : www.pakainfo.com