Так что мне очень нравится этот специальный эффект здесь https://www.w3schools.com/howto/howto_css_blurred_background.asp, где вы можете размыть фон и показать текст.Проблема, с которой я сейчас сталкиваюсь, заключается в том, что я хочу добавить другие обои для моего второго контента под моим первым контентом.Первый контент хороший.Теперь я хочу, чтобы мой второй контент находился во втором фоновом изображении при прокрутке.Вроде как создание эффекта параллакса, но вместо этого я создаю свой собственный уникальный веб-сайт.
На этот раз я хочу размытый фон ( обои номер два ), имея то, что у меня уже есть.хотите, чтобы он был помещен и имел фокус.
Есть ли способ достичь этого?
Начиная с bg-image2
, я хочу h1
и p
внутри bg-image2
, чтобы сфокусироваться на размытом фоновом изображении.
ПРИМЕЧАНИЕ: Обои не будут отображаться в приведенном ниже фрагменте кода, поскольку я уже получил нужные мне фотографиив моей папке, которая находится на моем компьютере.
body,
html {
height: 100%;
}
* {
box-sizing: border-box;
}
.bg-image {
/* The image used */
background-image: url("images/wallpaper1.jpg");
/* 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%);
z-index: 2;
width: 80%;
padding: 20px;
text-align: center;
}
.bg-image2 {
/* The image used */
background-image: url("images/wallpaper2.jpg");
/* 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;
}
.profilePicture {
position: absolute;
left: 50%;
margin: 200px auto;
transform: translate(-50%, -50%);
}
<div class="bg-image"></div>
<div class="bg-text">
<h1>My name is Stackoverflow</h1>
<p>And I am a website</p>
</div>
<div class="bg-image2">
<!-- This is the part where I want my stuff to not be blurred and focus -->
<div class="profilePicture">
<img src="images/profilePic.jpg" style="width: 170px; height: 170px; border-radius:50%;">
<h1>This is a title</h1>
<p>This is just a paragraph</p>
</div>
</div>