ホームページ > 記事 > ウェブフロントエンド > CSS を使用して高度なぼかした背景画像をすばやく作成
CSS を使用して高度なぼかした背景画像をすばやく作成
- 藏色散人オリジナル
- 2021-08-19 11:20:412426ブラウズ
あなたの Web ページを高級感のあるものにしたいですか? Web ページへの閲覧回数を増やしたいですか?ユーザーが一目であなたのページに惹きつけられるようにしたいですか?それでは、この記事をお見逃しなく！結局のところ、誰でも簡単かつ迅速にハイエンドのぼかした背景画像を作成する方法を学ぶことができます。
早速、本文から始めましょう。
タイトルの通り、今回ご紹介するのは個人のブログページやWebサイトの背景に適したぼかし背景画像をCSSで作成する方法です。
以下のコードを直接追加します:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title></title>
<style>
body, html {
height: 100%;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
* {
box-sizing: border-box;
}
.bg-image {
/* 所使用的图像 */
background-image: url("001.jpg");
/* 添加模糊效果 */
filter: blur(8px);
-webkit-filter: blur(8px);
/* 完整的高度 */
height: 100%;
/* 中心和缩放图像*/
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* 将文本放置在页面/图像的中间 */
.bg-text {
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.4);
color: white;
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 80%;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="bg-image"></div>
<div class="bg-text">
<h2>欢迎来到</h2>
<h1 style="font-size:50px">虚拟现实</h1>
<p>一切都是虚拟的，但感觉还是真实</p>
</div>
</body>
</html>効果は以下のようになります:
（背景画像はインターネットから取得したものです、権利侵害をご容赦ください）
どうですか！効果絶大じゃないですか！
そこで、上記のコードでは、いくつかの重要な CSS 属性を紹介します:
filter 属性は要素 (通常は ) の可視性を定義します。効果 (ぼかしや彩度など)。
注: Internet Explorer の古いバージョン (4.0 ～ 8.0) でサポートされている非標準の「フィルター」属性は非推奨になりました。 IE8 以前のブラウザでは通常、不透明度属性が使用されます。
transformプロパティは、要素に 2D または 3D 変換を適用します。このプロパティを使用すると、要素を回転、拡大縮小、移動、または傾けることができます。
border短縮プロパティは、1 つの宣言ですべての境界プロパティを設定します。
border-width：规定边框的宽度。 border-style：规定边框的样式。 border-color：规定边框的颜色。 inherit：规定应该从父元素继承 border 属性的设置。
background省略形プロパティは、1 つの宣言ですべての背景プロパティを設定します。
background-color：规定要使用的背景颜色。 background-position：规定背景图像的位置。 background-size：规定背景图片的尺寸。 background-repeat：规定如何重复背景图像。 background-origin：规定背景图片的定位区域。 background-clip：规定背景的绘制区域。 background-attachment：规定背景图像是否固定或者随着页面的其余部分滚动。 background-image：规定要使用的背景图像。 inherit：规定应该从父元素继承 background 属性的设置。
PHP 中国語 Web サイト プラットフォームには、多くのビデオ教育リソースがあります。皆さんも「css ビデオ チュートリアル 」を学習してください。
以上がCSS を使用して高度なぼかした背景画像をすばやく作成の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。