Dezaburirea conținutului în interiorul div de fundal neclar (Programare, Html, Css, Imagine De Fundal, Tapet)

Azazel a intrebat.

Deci, îmi place foarte mult acest tip de efect special aici https://www.w3schools.com/howto/howto_css_blurred_background.asp în care poți estompa un fundal și să se vadă textul. Problema pe care o am acum este că vreau să adaug un alt fundal pentru al doilea conținut sub primul meu conținut. Primul conținut este bun. Acum vreau ca al doilea conținut să fie în al doilea tapet pe măsură ce derulați. Un fel de a crea un efect de parallax, dar în schimb eu îmi creez propriul meu site unic.

De data aceasta vreau un fundal neclar (tapetul numărul doi), în timp ce lucrurile să fie plasate deja acolo unde vreau eu și să fie focalizate.

Există o modalitate de a realiza acest lucru?

Începând de acolo de unde bg-image2, , vreau ca h1, , și pe p, , în interiorul bg-image2 să se concentreze peste imaginea de fundal neclară.

NOTĂ: Imaginea de fundal nu se va afișa în fragmentul de mai jos, deoarece am deja imaginile de care am nevoie în folderul meu care se află în calculatorul meu.

Comentarii

  • Nu ai putea să estompezi imaginile de fundal cu un filtru (folosind ceva de genul Photoshop) înainte de a le plasa ca imagine de fundal și să elimini css-ul de filtrare cu totul? –  > Por KJEK-Code.
  • @KJEK-Code Corect, bună observație. Cred că voi rămâne doar cu stilizarea unei fotografii folosind un alt instrument înainte de a-mi face site-ul meu un pic complicat cu toate aceste coduri nebunești. –  > Por Azazel.
  • Cele mai bune de noroc pentru tine Azazel –  > Por KJEK-Code.
2 răspunsuri
Cryptomothy

Acesta este rezultatul pe care îl căutați?

https://codepen.io/anon/pen/exVRyy

Tot ceea ce am făcut a fost să creez un div în jurul bg-image2 și profilePicture, , astfel încât blur-ul de pe bg-image2 nu afectează profilePicture, , apoi am setat acel div la position:relative; , astfel încât profilePicture poate fi plasat în mijloc, așa cum ai făcut tu.

Aici este HTML-ul tău editat:

<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-test">
  <div class="bg-image2">

    <!-- This is the part where I want my stuff to not be blurred and focus -->

  </div>

  <div class="profilePicture">
      <img src="https://images.pexels.com/photos/1253661/pexels-photo-1253661.jpeg?cs=srgb&dl=android-wallpaper-bluhen-blume-1253661.jpg&fm=jpg" style="width: 170px; height: 170px; border-radius:50%;">
      <h1>This is a title</h1>
      <p>This is just a paragraph</p>
    </div>
</div>

Și CSS-ul:

body,
html {
  height: 100%;
}

* {
  box-sizing: border-box;
}

.bg-image {
  /* The image used */
  background-image: url("https://images.unsplash.com/photo-1507608616759-54f48f0af0ee?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80");
  /* 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-test {
  position:relative;
}

.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("https://whatthenewsblog.files.wordpress.com/2015/03/ecl-ann.jpg");
  /* Add the blur effect */
  filter: blur(8px);
  -webkit-filter: blur(8px);
  /* Full height */
  height: 100vh;
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.profilePicture {
  position: absolute;
  left: 50%;
  top:50%;
  margin: 0 auto;
  transform: translate(-50%, -50%);
}

Comentarii

  • Un exemplu frumos și curat și multe comentarii. Bună treabă. –  > Por Mikepote.
  • Ar fi frumos dacă ați adăuga codul la răspunsul de aici, în SO, pentru a-l face autosuficient. Dacă Pen se șterge vreodată și/sau nu este disponibil, răspunsul devine incomplet și deci inutil pentru comunitate. –  > Por blurfus.
  • Bine gândit. Gata! –  > Por Cryptomothy.
iam_crizhna

M-am confruntat cu o problemă similară. După o mulțime de căutări, am găsit soluția perfectă. puteți folosi backdrop-filter.

Codul dvs:

Știu că a trecut atât de mult timp de când ai întrebat și ai primit răspunsurile. sper că acest lucru va fi de ajutor pentru altcineva 🙂

Am modificat codul de la cryptomothy