如何在 html 中添加带文字的模糊图像？
how to add blurred images with text in html?
我是 HTML AND CSS 的新手，我正在制作一个小型汽车网站，我希望图像模糊，文字显示在上方。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
height: 100%;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
* {
box-sizing: border-box;
}
.bg-image {
/* The image used */
background-image: url("https://th.bing.com/th/id/R.4418ff70835bb7e45f3b5d83c7ff5f5e?rik=bD4DENSEINH8%2bA&riu=http%3a%2f%2fwallup.net%2fwp-content%2fuploads%2f2017%2f03%2f28%2f439234-sports_car-vehicle-Lamborghini-Italian_Supercars.jpg&ehk=kG5ZwFnums33xnh3qxViA8B4WZ73wbUAjrictsOSXbU%3d&risl=&pid=ImgRaw&r=0");
/* Add the blur effect */
filter: blur(8px);
-webkit-filter: blur(8px);
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bg-image1 {
/* The image used */
background-image: url("https://th.bing.com/th/id/OIP.WZziNQ9wRCIosw1FGPkJsAHaEK?pid=ImgDet&rs=1");
/* Add the blur effect */
filter: blur(8px);
-webkit-filter: blur(8px);
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* Position text in the middle of the page/image */
.bg-text {
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
color: white;
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
padding: 20px;
text-align: center;
}
.bg-text1 {
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
color: white;
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="bg-image"></div>
<div class="bg-text">
<h2>Blurred Background</h2>
<h1>My car website</h1>
<p>This is a blurred lamborghini</p>
</div>
<hr>
<div class="bg-image1"></div>
<div class="bg-text1">
<h2>Blurred Background</h2>
<h1>My car website</h1>
<p>This is a blurred lamborghini</p>
</div>
</body>
</html>
代码是这样的，我在一个叫w3schools.com
的网站上找到的
所以，图片一分为二，没问题，但文本块不行。它只出现在第一张图片中，而不出现在第二张图片中。我怎样才能解决这个问题 ？任何人都可以分享一些代码吗？
尝试考虑这个：
可能会对您有所帮助。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
height: 100%;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
* {
box-sizing: border-box;
}
.bg-image {
/* The image used */
background-image: url("https://th.bing.com/th/id/R.4418ff70835bb7e45f3b5d83c7ff5f5e?rik=bD4DENSEINH8%2bA&riu=http%3a%2f%2fwallup.net%2fwp-content%2fuploads%2f2017%2f03%2f28%2f439234-sports_car-vehicle-Lamborghini-Italian_Supercars.jpg&ehk=kG5ZwFnums33xnh3qxViA8B4WZ73wbUAjrictsOSXbU%3d&risl=&pid=ImgRaw&r=0");
/* Add the blur effect */
filter: blur(8px);
-webkit-filter: blur(8px);
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bg-image1 {
/* The image used */
background-image: url("https://th.bing.com/th/id/OIP.WZziNQ9wRCIosw1FGPkJsAHaEK?pid=ImgDet&rs=1");
/* Add the blur effect */
filter: blur(8px);
-webkit-filter: blur(8px);
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* Position text in the middle of the page/image */
.bg-text {
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
color: white;
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
padding: 20px;
text-align: center;
}
.bg-text1 {
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
color: white;
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 150%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="bg-image"></div>
<div class="bg-text">
<h2>Blurred Background</h2>
<h1>My car website</h1>
<p>This is a blurred lamborghini</p>
</div>
<div class="bg-image1"></div>
<div class="bg-text1">
<h2>Blurred Background</h2>
<h1>My car website</h1>
<p>This is a blurred ferrari </p>
</div>
</body>
</html>
bg-text 和 bg-text1 都位于完全相同的坐标上，因此它们在彼此之上。您需要添加一个容器并将其相对定位，以便绝对位置相对于容器，如下所示：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
height: 100%;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
* {
box-sizing: border-box;
}
.bg-image {
/* The image used */
background-image: url("https://th.bing.com/th/id/R.4418ff70835bb7e45f3b5d83c7ff5f5e?rik=bD4DENSEINH8%2bA&riu=http%3a%2f%2fwallup.net%2fwp-content%2fuploads%2f2017%2f03%2f28%2f439234-sports_car-vehicle-Lamborghini-Italian_Supercars.jpg&ehk=kG5ZwFnums33xnh3qxViA8B4WZ73wbUAjrictsOSXbU%3d&risl=&pid=ImgRaw&r=0");
/* Add the blur effect */
filter: blur(8px);
-webkit-filter: blur(8px);
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bg-image1 {
/* The image used */
background-image: url("https://th.bing.com/th/id/OIP.WZziNQ9wRCIosw1FGPkJsAHaEK?pid=ImgDet&rs=1");
/* Add the blur effect */
filter: blur(8px);
-webkit-filter: blur(8px);
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* Position text in the middle of the page/image */
.bg-text {
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
color: white;
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
padding: 20px;
text-align: center;
}
.bg-text1 {
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
color: white;
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
padding: 20px;
text-align: center;
}
.bg-image-container {
position: relative;
height: 100vh; // Set the height to cover the viewport
}
</style>
</head>
<body>
<div class="bg-image-container">
<div class="bg-image"></div>
<div class="bg-text">
<h2>Blurred Background</h2>
<h1>My car website</h1>
<p>This is a blurred lamborghini</p>
</div>
</div>
<hr>
<div class="bg-image-container">
<div class="bg-image1"></div>
<div class="bg-text1">
<h2>Blurred Background</h2>
<h1>My car website</h1>
<p>This is a blurred lamborghini</p>
</div>
</div>
</body>
</html>
试试不同的方法怎么样。
这里有 2 个 div。 1是背景图片，2是内容。
.background-image div 本身与背景图像一起模糊。
.background-image 的 z-index 低于 .content，因此它出现在 .content
下方
我使用 flexbox 将页面上的文本垂直和水平居中。
p、.background-image、.content的宽度可以根据需要调整。
希望你明白了！
注：我是按照页面的整体大小做的。您可以相应地调整宽度和高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
.background-image {
position: fixed;
left: 0;
right: 0;
z-index: 1;
display: block;
background-image: url('https://robbreport.com/wp-content/uploads/2020/07/6-3.jpg?w=1000');
width: 100vw;
height: 100vh;
-webkit-filter: blur(18px);
-moz-filter: blur(18px);
-o-filter: blur(18px);
-ms-filter: blur(18px);
filter: blur(18px);
background-size: cover;
background-repeat: no-repeat;
}
.content {
position: fixed;
left: 0;
right: 0;
height: 100vh;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
p{
width: 70%;
}
</style>
<div class="background-image"></div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam erat in ante malesuada, facilisis semper nulla semper. Phasellus sapien neque, faucibus in malesuada quis, lacinia et libero. Sed sed turpis tellus. Etiam ac aliquam tortor, eleifend
rhoncus metus. Ut turpis massa, sollicitudin sit amet molestie a, posuere sit amet nisl. Mauris tincidunt cursus posuere. Nam commodo libero quis lacus sodales, nec feugiat ante posuere. Donec pulvinar auctor commodo. Donec egestas diam ut mi adipiscing,
quis lacinia mauris condimentum. Quisque quis odio venenatis, venenatis nisi a, vehicula ipsum. Etiam at nisl eu felis vulputate porta.</p>
</div>
</body>
</html>
我是 HTML AND CSS 的新手，我正在制作一个小型汽车网站，我希望图像模糊，文字显示在上方。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
height: 100%;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
* {
box-sizing: border-box;
}
.bg-image {
/* The image used */
background-image: url("https://th.bing.com/th/id/R.4418ff70835bb7e45f3b5d83c7ff5f5e?rik=bD4DENSEINH8%2bA&riu=http%3a%2f%2fwallup.net%2fwp-content%2fuploads%2f2017%2f03%2f28%2f439234-sports_car-vehicle-Lamborghini-Italian_Supercars.jpg&ehk=kG5ZwFnums33xnh3qxViA8B4WZ73wbUAjrictsOSXbU%3d&risl=&pid=ImgRaw&r=0");
/* Add the blur effect */
filter: blur(8px);
-webkit-filter: blur(8px);
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bg-image1 {
/* The image used */
background-image: url("https://th.bing.com/th/id/OIP.WZziNQ9wRCIosw1FGPkJsAHaEK?pid=ImgDet&rs=1");
/* Add the blur effect */
filter: blur(8px);
-webkit-filter: blur(8px);
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* Position text in the middle of the page/image */
.bg-text {
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
color: white;
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
padding: 20px;
text-align: center;
}
.bg-text1 {
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
color: white;
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="bg-image"></div>
<div class="bg-text">
<h2>Blurred Background</h2>
<h1>My car website</h1>
<p>This is a blurred lamborghini</p>
</div>
<hr>
<div class="bg-image1"></div>
<div class="bg-text1">
<h2>Blurred Background</h2>
<h1>My car website</h1>
<p>This is a blurred lamborghini</p>
</div>
</body>
</html>
代码是这样的，我在一个叫w3schools.com
的网站上找到的所以，图片一分为二，没问题，但文本块不行。它只出现在第一张图片中，而不出现在第二张图片中。我怎样才能解决这个问题 ？任何人都可以分享一些代码吗？
尝试考虑这个：
可能会对您有所帮助。<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
height: 100%;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
* {
box-sizing: border-box;
}
.bg-image {
/* The image used */
background-image: url("https://th.bing.com/th/id/R.4418ff70835bb7e45f3b5d83c7ff5f5e?rik=bD4DENSEINH8%2bA&riu=http%3a%2f%2fwallup.net%2fwp-content%2fuploads%2f2017%2f03%2f28%2f439234-sports_car-vehicle-Lamborghini-Italian_Supercars.jpg&ehk=kG5ZwFnums33xnh3qxViA8B4WZ73wbUAjrictsOSXbU%3d&risl=&pid=ImgRaw&r=0");
/* Add the blur effect */
filter: blur(8px);
-webkit-filter: blur(8px);
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bg-image1 {
/* The image used */
background-image: url("https://th.bing.com/th/id/OIP.WZziNQ9wRCIosw1FGPkJsAHaEK?pid=ImgDet&rs=1");
/* Add the blur effect */
filter: blur(8px);
-webkit-filter: blur(8px);
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* Position text in the middle of the page/image */
.bg-text {
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
color: white;
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
padding: 20px;
text-align: center;
}
.bg-text1 {
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
color: white;
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 150%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="bg-image"></div>
<div class="bg-text">
<h2>Blurred Background</h2>
<h1>My car website</h1>
<p>This is a blurred lamborghini</p>
</div>
<div class="bg-image1"></div>
<div class="bg-text1">
<h2>Blurred Background</h2>
<h1>My car website</h1>
<p>This is a blurred ferrari </p>
</div>
</body>
</html>
bg-text 和 bg-text1 都位于完全相同的坐标上，因此它们在彼此之上。您需要添加一个容器并将其相对定位，以便绝对位置相对于容器，如下所示：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
height: 100%;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
* {
box-sizing: border-box;
}
.bg-image {
/* The image used */
background-image: url("https://th.bing.com/th/id/R.4418ff70835bb7e45f3b5d83c7ff5f5e?rik=bD4DENSEINH8%2bA&riu=http%3a%2f%2fwallup.net%2fwp-content%2fuploads%2f2017%2f03%2f28%2f439234-sports_car-vehicle-Lamborghini-Italian_Supercars.jpg&ehk=kG5ZwFnums33xnh3qxViA8B4WZ73wbUAjrictsOSXbU%3d&risl=&pid=ImgRaw&r=0");
/* Add the blur effect */
filter: blur(8px);
-webkit-filter: blur(8px);
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bg-image1 {
/* The image used */
background-image: url("https://th.bing.com/th/id/OIP.WZziNQ9wRCIosw1FGPkJsAHaEK?pid=ImgDet&rs=1");
/* Add the blur effect */
filter: blur(8px);
-webkit-filter: blur(8px);
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* Position text in the middle of the page/image */
.bg-text {
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
color: white;
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
padding: 20px;
text-align: center;
}
.bg-text1 {
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
color: white;
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
padding: 20px;
text-align: center;
}
.bg-image-container {
position: relative;
height: 100vh; // Set the height to cover the viewport
}
</style>
</head>
<body>
<div class="bg-image-container">
<div class="bg-image"></div>
<div class="bg-text">
<h2>Blurred Background</h2>
<h1>My car website</h1>
<p>This is a blurred lamborghini</p>
</div>
</div>
<hr>
<div class="bg-image-container">
<div class="bg-image1"></div>
<div class="bg-text1">
<h2>Blurred Background</h2>
<h1>My car website</h1>
<p>This is a blurred lamborghini</p>
</div>
</div>
</body>
</html>
试试不同的方法怎么样。
这里有 2 个 div。 1是背景图片，2是内容。
.background-image div 本身与背景图像一起模糊。
.background-image 的 z-index 低于 .content，因此它出现在 .content
我使用 flexbox 将页面上的文本垂直和水平居中。
p、.background-image、.content的宽度可以根据需要调整。
希望你明白了！
注：我是按照页面的整体大小做的。您可以相应地调整宽度和高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
.background-image {
position: fixed;
left: 0;
right: 0;
z-index: 1;
display: block;
background-image: url('https://robbreport.com/wp-content/uploads/2020/07/6-3.jpg?w=1000');
width: 100vw;
height: 100vh;
-webkit-filter: blur(18px);
-moz-filter: blur(18px);
-o-filter: blur(18px);
-ms-filter: blur(18px);
filter: blur(18px);
background-size: cover;
background-repeat: no-repeat;
}
.content {
position: fixed;
left: 0;
right: 0;
height: 100vh;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
p{
width: 70%;
}
</style>
<div class="background-image"></div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam erat in ante malesuada, facilisis semper nulla semper. Phasellus sapien neque, faucibus in malesuada quis, lacinia et libero. Sed sed turpis tellus. Etiam ac aliquam tortor, eleifend
rhoncus metus. Ut turpis massa, sollicitudin sit amet molestie a, posuere sit amet nisl. Mauris tincidunt cursus posuere. Nam commodo libero quis lacus sodales, nec feugiat ante posuere. Donec pulvinar auctor commodo. Donec egestas diam ut mi adipiscing,
quis lacinia mauris condimentum. Quisque quis odio venenatis, venenatis nisi a, vehicula ipsum. Etiam at nisl eu felis vulputate porta.</p>
</div>
</body>
</html>