CSSを使用して別の画像の上に画像（透明）を表示する方法
女性
ブラウザにスクリーンセーバーを表示する必要があります。スクリーンセーバーには、静止画像と動画の2つの部分が含まれている必要があります。動画には建物がいくつかあり、建物がない残りの領域（262 x 192）では透明です。コードは以下の通りです。
<!DOCTYPE html>
<html>
<head>
<title>Moving Screen Saver</title>
<style>
html, body {
position: relative;
height: 100%;
width: 100%
}
#bgimg {
background-image: url("background/background2.jpeg");
position: absolute;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
}
#bdgimg {
background-image: url("buildings/bdg2.jpeg");
opacity: 0.5;
position: absolute;
background-repeat: no-repeat;
bottom: 0px;
left : 0px;
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div id="bgimg">
</div>
<div id="bdgimg">
</div>
</body>
</html>
2番目の画像が表示されています。ただし、透明領域の代わりに、一部の色が透明ではなく表示されます。さまざまな不透明度の値を試してみましたが、役に立ちませんでした。誰かがこの問題を解決するのを手伝ってくれませんか。
灰
これがお役に立てば幸いです。以下のプロパティをcssに追加してください
#bdgimg {
background-color:transparent;
}
これがなくても正常に動作しているため、画像に他の問題がある可能性があります。
編集これはデモです。
<!DOCTYPE html>
<html>
<head>
<title>Moving Screen Saver</title>
<style>
html, body {
position: relative;
height: 100%;
width: 100%
}
#bgimg {
background-image: url("https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg");
position: absolute;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
}
#bdgimg {
background-image: url("https://cdn.pixabay.com/photo/2017/12/05/09/12/business-2998905_960_720.png");
opacity: 1;
position: absolute;
background-repeat: no-repeat;
bottom: 0px;
left : 0px;
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div id="bgimg">
</div>
<div id="bdgimg">
</div>
</body>
</html>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
関連記事
Related 関連記事
- 1
CSSルールを使用して透明な画像を別の画像の上に配置する際の問題
- 2
PILを使用して透明なPNG画像を別の画像とマージする方法
- 3
.paste（）クラスなしでPILを使用して透明な画像を別の画像に配置する方法
- 4
ある画像を別の画像の上に表示する方法は？
- 5
CSSを使用してホバーした画像の上に表示される画像
- 6
Bootstrap4を使用して画像を別の画像の上に中央揃えする
- 7
cssを使用して画像の位置を別の画像にリンクする
- 8
iMagickを使用して画像を別の画像の上にオーバーレイする方法
- 9
cssを使用して他のフォルダに背景画像を表示する方法は？
- 10
Scikit-imageを使用して透明なpng画像を別の画像とマージする方法
- 11
ホバーして画像の上に説明を表示する方法
- 12
imagemagickを使用して、ある画像から別の画像に透明度を転送します
- 13
CSSを使用して別の画像の上に画像を追加できません
- 14
画像を別の画像の上に置いて画像としてエクスポートする方法
- 15
ホバーした画像を非表示にして、CSSのみを使用して別の画像を表示することはできますか？
- 16
ボタンの半透明の画像の上にテキストを表示する方法
- 17
cssを使用してホバー時に画像の不透明度を変更する方法
- 18
不透明度のない別の画像の上に画像を配置します
- 19
CSSを使用して1つの画像を別の画像の上にフロートさせる
- 20
CSSを使用して1つの画像を別の画像の上にフロートさせる
- 21
別の画像の上に画像を表示する
- 22
CSSを使用して画像にこの効果を作成する方法
- 23
SWTグラフィックスを使用して、別の画像の上に動的な透明画像の描画
- 24
画像の白い背景を削除して透明にする方法は？
- 25
画像の白い背景を削除して透明にする方法は？
- 26
別の画像をクリックしたときに別の画像の上にある画像を非表示にする方法
- 27
imshowを使用して地図上に画像を表示する方法は？
- 28
cssを使用して透明なボックスに画像を追加する方法
- 29
画像を別の画像の上に配置する方法
コメントを追加