问题：
如何在html中添加带有文本的模糊图像？[副本]
尤博达
我是超文本标记语言和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的网站上找到了它。通用域名格式
因此，图像分为两部分，可以，但文本块不是。它只出现在第一个图像中，而不是第二个图像中。我怎样才能解决这个问题？谁能分享一些代码？
共有3个答案
刘奇
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>
堵浩波
试试另一种方法怎么样。
这里有两个div。1是背景图像，2是内容。。背景图像div本身与背景图像一起模糊。的z索引。背景图像低于。内容，使其显示在下方。内容
我使用flexbox在页面上垂直和水平居中放置文本。您可以调整p，的宽度。背景图像和。内容根据您的需要而定。
希望你能理解！
注：这个我是按照页面的整体大小做的。你可以相应地调整宽度和高度
<!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 lang-html prettyprint-override"><!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>
类似资料：
-
我想实现像下图这样的输出，请帮助我，我自己尝试过，但没有得到相同的输出。下面是我的代码: 想要这样的东西
-
问题内容： 我正在尝试在Java游戏中实现模糊机制。如何在运行时创建模糊效果？ 问题答案： 请参阅/ Google“卷积滤镜”，这是一种根据周围像素值更改像素值的方法。因此，除了模糊之外，您还可以进行图像锐化和寻线。
-
问题内容： 我环顾四周，但未能弄清楚如何获取文本，将其覆盖在图像上，然后将两者合并为一个。 我已经用我能想到的搜索字词用尽了Google，因此，如果有人有解决方案或至少有一个提示，他们可以指出它，将不胜感激。 问题答案： 好吧…我知道了： 要调用它，您只需传递一个图像： 最初的目标是创建一个动态图像，我可以在其中使用该图像，例如在地图上的给定位置标价，这很适合。希望这对尝试做同样事情的人有所帮助。
-
我有一个基于Windows的docker容器，运行它并在其中运行一个应用程序。但有时我需要在图像中添加一个文件夹，并运行另一个应用程序。如何递归添加 从我的主机到我的图像？
-
好吧，我有gridview，它从服务器中提取图像
-
所以我是python的初学者，正在尝试制作仪表板。 我有一个文件夹，上面有我上传的照片。 结构： 我应该如何设置，以便我可以加载图片并将其放入