Надпис и изображения се припокриват

Тъй като съм много наивен в HTML и CSS, не мога да направя това, освен като създам изображение. И така, как мога да създам текст, припокриващ изображение, с цвят на фона?

В детайли:

Имам квадратно изображение и бих искал да добавя припокриващ се текст. Този текст трябва да има цвят на фона, обхващащ цялото изображение и трябва да бъде центриран както вертикално, така и хоризонтално, както е на снимката.

Как мога да направя това в HTML+CSS? Бих искал да избегна създаването на изображения.

Благодаря!

Пример


html css overlapping
person senseiwa    schedule 14.12.2015    source източник
comment
Тааааа... какво опита?   -  person BuddhistBeast    schedule 14.12.2015
comment
Въпреки че може да не сте правили опит с CSS, трябва със сигурност да сте съставили някакъв основен HTML, за да започнете да прилагате това. И така, какъв HTML имате? Какви опити направихте? SO не е безплатна услуга за писане на код, а помага на хората да се справят с програмни проблеми, които са срещнали. Опитайте се да потърсите правилно решение, опитайте се да приложите нещо и кога или ако това не работи? След това се върнете и помолете за помощ, като покажете съответния минимално възпроизводим пример код, като имате прочетете указанията Как да питам.   -  person David says reinstate Monica    schedule 14.12.2015

Отговори (4)


arrow_upward
1
arrow_downward

Използвах примерното изображение на пингвин.

HTML кодът-

<div class="imageShadow textCenter">
 <h2>Hello</h2>
</div>

CSS кодът-

.imageShadow {
  background: 
    linear-gradient(
      rgba(0, 0, 0, 0.8),
      rgba(0, 0, 0, 0.8)
    ),
 url('http://amolife.com/image/images/stories/Animals/penguins%20(8).jpg');
  background-size: cover;
  width: 300px;
  height: 200px;
  margin: 10px 0 0 10px;
  position: relative;
  float: left;
}
.textCenter h2 {
  color: white;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 2rem;
  transform: translate(-50%, -50%);
}

И ето една цигулка, в случай че искате да я видите в действие - http://jsfiddle.net/SarhadSalam/wut8gtwq/

person Sarhad Salam    schedule 14.12.2015
comment
Възможно ли е да премахнете изображението от CSS и да го преместите в img таг? - person senseiwa; 15.12.2015

arrow_upward
0
arrow_downward

Първо създайте заобикалящ контейнер, който съдържа само вашето изображение. След това създайте друг DIV вътре в този контейнер, който има

position: absolute;
width: 100%;
height: 100%;
opacity: 0.5;
text-align: center;

Добавете също желаните background-color, font-size и color и опитайте различни стойности на непрозрачност.

person Johannes    schedule 14.12.2015

arrow_upward
0
arrow_downward

Предполагам, че искате да създадете изображение с наслагване при задържане. Можете да го направите по този начин.

h3, p {
  margin: 0;
}

.box {
  text-align: center;
  position: relative;
  float: left;
}

.box-hover {
  background: white;;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: 0.3s all ease-in;
}

.box:hover .box-hover {
  opacity: 0.9;
}
<div class="box">
  <img src="http://placehold.it/350x150/000000/ffffff">
  <div class="box-hover">
    <div class="box-hover-content">
      <h3>Title</h3>
      <p>Lorem ipsum dolor sit amet, <br> consectetur adipisicing.</p>
    </div>
  </div>
</div>

person Nenad Vracar    schedule 14.12.2015
comment
Не, само статично изображение. Но надписите трябва да имат фон като на изображението и да са центрирани в правоъгълника на фона. - person senseiwa; 15.12.2015

arrow_upward
0
arrow_downward

Опитайте тази

position: absolute;
padding :30px;     /*(approx make change according to the page alignment for 
                     image)*/
text-align: center;
background-color:#CCC;
z-index:1;   /*( if no z-index is given for the previous image, else give more 
              value than that)*/
person vinoth    schedule 14.12.2015