Web-Frontend
CSS-Tutorial
Erstellen Sie mit CSS schnell erweiterte, verschwommene Hintergrundbilder
Erstellen Sie mit CSS schnell erweiterte, verschwommene Hintergrundbilder
Möchten Sie, dass Ihre Webseite hochwertig aussieht? Möchten Sie die Anzahl der Lesebesuche auf Ihrer Webseite erhöhen? Möchten Sie, dass Ihre Nutzer auf den ersten Blick auf Ihre Seite aufmerksam werden? Dann verpassen Sie diesen Artikel nicht! Schließlich kann jeder lernen, wie man einfach und schnell ein hochwertiges, unscharfes Hintergrundbild erstellt!
Beginnen wir ohne weitere Umschweife mit dem Haupttext!
Wie der Titel schon sagt, stellen wir Ihnen heute vor, mithilfe von CSS ein unscharfes Hintergrundbild zu erstellen, das für den Hintergrund Ihrer persönlichen Blog-Seite und Website geeignet ist.
Ich werde den folgenden Code direkt hinzufügen:
<!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 id="欢迎来到">欢迎来到</h2>
<h1 id="虚拟现实">虚拟现实</h1>
<p>一切都是虚拟的，但感觉还是真实</p>
</div>
</body>
</html>Der Effekt ist wie im Bild unten gezeigt:
(Das Hintergrundbild stammt aus dem Internet, Entschuldigung für den Verstoß)
Wie wäre es damit? ! Ist der Effekt nicht toll!
Im obigen Code werde ich Ihnen einige wichtige CSS-Attribute vorstellen:
filter Attribut definiert den visuellen Effekt (wie Unschärfe und Sättigung) des Elements (normalerweise ) Ausgeben).
filter 属性定义了元素(通常是)的可视效果(例如：模糊与饱和度)。
注： 旧版 Internet Explorer 浏览器(4.0 to 8.0) 支持的非标准 "filter" 属性已被废弃。 IE8 及更低版本浏览器通常使用 opacity 属性。
transform属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
border简写属性在一个声明设置所有的边框属性。
border-width：规定边框的宽度。 border-style：规定边框的样式。 border-color：规定边框的颜色。 inherit：规定应该从父元素继承 border 属性的设置。
background
border-Kurzschrifteigenschaft legt alle Randeigenschaften in einer Deklaration fest. Die Kurzschrifteigenschaft 🎜background-color：规定要使用的背景颜色。 background-position：规定背景图像的位置。 background-size：规定背景图片的尺寸。 background-repeat：规定如何重复背景图像。 background-origin：规定背景图片的定位区域。 background-clip：规定背景的绘制区域。 background-attachment：规定背景图像是否固定或者随着页面的其余部分滚动。 background-image：规定要使用的背景图像。 inherit：规定应该从父元素继承 background 属性的设置。
background legt alle Hintergrundeigenschaften in einer Deklaration fest. 🎜rrreee🎜Die chinesische PHP-Website-Plattform verfügt über viele Video-Lehrressourcen. Jeder ist herzlich willkommen, das „🎜CSS-Video-Tutorial🎜“ zu lernen! 🎜Das obige ist der detaillierte Inhalt vonErstellen Sie mit CSS schnell erweiterte, verschwommene Hintergrundbilder. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
So verwenden Sie Bootstrap in Vue
Apr 07, 2025 pm 11:33 PM
Die Verwendung von Bootstrap in Vue.js ist in fünf Schritte unterteilt: Startstrap installieren. Bootstrap in main.js. Verwenden Sie die Bootstrap -Komponente direkt in der Vorlage. Optional: benutzerdefinierter Stil. Optional: Verwenden Sie Plug-Ins.
Die Rollen von HTML, CSS und JavaScript: Kernverantwortung
Apr 08, 2025 pm 07:05 PM
HTML definiert die Webstruktur, CSS ist für Stil und Layout verantwortlich, und JavaScript ergibt eine dynamische Interaktion. Die drei erfüllen ihre Aufgaben in der Webentwicklung und erstellen gemeinsam eine farbenfrohe Website.
HTML, CSS und JavaScript verstehen: Ein Anfängerhandbuch
Apr 12, 2025 am 12:02 AM
WebdevelopmentRelieSonHtml, CSS und JavaScript: 1) HtmlStructuresContent, 2) CSSstylesit und 3) JavaScriptaddssinteraktivität, Bildung von TheBasisofModerernwebexperiences.
So schreiben Sie geteilte Zeilen auf Bootstrap
Apr 07, 2025 pm 03:12 PM
Es gibt zwei Möglichkeiten, eine Bootstrap -Split -Zeile zu erstellen: Verwenden des Tags, das eine horizontale Split -Linie erstellt. Verwenden Sie die CSS -Border -Eigenschaft, um benutzerdefinierte Style Split -Linien zu erstellen.
So fügen Sie Bilder auf Bootstrap ein
Apr 07, 2025 pm 03:30 PM
Es gibt verschiedene Möglichkeiten, Bilder in Bootstrap einzufügen: Bilder direkt mit dem HTML -IMG -Tag einfügen. Mit der Bootstrap -Bildkomponente können Sie reaktionsschnelle Bilder und weitere Stile bereitstellen. Legen Sie die Bildgröße fest und verwenden Sie die IMG-Fluid-Klasse, um das Bild anpassungsfähig zu machen. Stellen Sie den Rand mit der img-beliebten Klasse ein. Stellen Sie die abgerundeten Ecken ein und verwenden Sie die IMG-Rund-Klasse. Setzen Sie den Schatten, verwenden Sie die Schattenklasse. Größen Sie die Größe und positionieren Sie das Bild im CSS -Stil. Verwenden Sie mit dem Hintergrundbild die CSS-Eigenschaft im Hintergrund.
So richten Sie das Framework für Bootstrap ein
Apr 07, 2025 pm 03:27 PM
Um das Bootstrap -Framework einzurichten, müssen Sie die folgenden Schritte befolgen: 1. Verweisen Sie die Bootstrap -Datei über CDN; 2. Laden Sie die Datei auf Ihrem eigenen Server herunter und hosten Sie sie. 3.. Fügen Sie die Bootstrap -Datei in HTML hinzu; 4. Kompilieren Sie Sass/weniger bei Bedarf; 5. Importieren Sie eine benutzerdefinierte Datei (optional). Sobald die Einrichtung abgeschlossen ist, können Sie die Grid -Systeme, -Komponenten und -stile von Bootstrap verwenden, um reaktionsschnelle Websites und Anwendungen zu erstellen.
So verwenden Sie die Bootstrap -Taste
Apr 07, 2025 pm 03:09 PM
Wie benutze ich die Bootstrap -Taste? Führen Sie Bootstrap -CSS ein, um Schaltflächenelemente zu erstellen, und fügen Sie die Schaltfläche "Bootstrap" hinzu, um Schaltflächentext hinzuzufügen
So ändern Sie Bootstrap
Apr 07, 2025 pm 03:18 PM
Um die Größe der Elemente in Bootstrap anzupassen, können Sie die Dimensionsklasse verwenden, einschließlich: Einstellbreite:.
