如何在滚动图像上放置文字？ [英] How to put text on scrolling images?

问题描述

你好....



我必须显示5个滚动图像和文字。



有谁知道怎么做？



我尝试过：



i二手风格，



* {

保证金：0;

填充：0;

border：0;

}



/ *相关款式* /

。 img__wrap {

职位：亲属;

身高：500px;

宽度：1000px;

}



.img__description {

职位：绝对;

顶部：0;

底部： 0;

左：0;

右：0;



颜色：＃000;

可见性：隐藏;

不透明度：0;

字体大小：40px;



/ *过渡效应。没必要* /

过渡：不透明度.2s，能见度.2s;

}



.img__wrap：悬停.img__description {

能见度：可见;

不透明度：1;

}



和

html代码为

< div class =img__wrap> 
< img class =img__imgsrc =img1 / itint.jpg/> 
< p class =img__description>此图片看起来非常整洁。< / p> 
< / div> 

解决方案

此代码显示您的5张图片和文字。探针是什么你面对exaclty善意解释

 <  < span class =code-leadattribute> div     class   =  img__wrap >  
 <   img     class   =  img__img    src   =  img1 / itint.jpg    /  >  
 <   p     class   =  img__description > 此图片看起来非常整洁。<   / p  >  
 <   / div  >  <   div     class   =   img__wrap >  
 <   img     class   =  img__img    src   =  img1 / itint.jpg    /  > ;  
 <   p     class   =  img__description > 此图片看起来非常整洁。<   / p  >  
 <   / div  >  
 <   div     class   =   img__wrap >  
 <   img     class   =  img__img    src   =  img1 / itint.jpg    /  >  
 <   p     class   =  img__description > 此图片看起来非常整洁。<   / p  >  
 <   / div  >  <   div     class   =  img__wrap >  
 <   img     class   =  img__img    src   =  img1 / itint.jpg    /  >  
 <   p     class   =  img__description > 此图片看起来非常整洁。<   / p  >  
 <   / div  >  

Hello....

I have to display 5 scrolling images along with text.

Does anyone know how to do this?

What I have tried:

i used style,

* {
margin: 0;
padding: 0;
border: 0;
}

/* relevant styles */
.img__wrap {
position: relative;
height: 500px;
width: 1000px;
}

.img__description {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;

color: #000;
visibility: hidden;
opacity: 0;
font-size:40px;

/* transition effect. not necessary */
transition: opacity .2s, visibility .2s;
}

.img__wrap:hover .img__description {
visibility: visible;
opacity: 1;
}

and
html code as

<div class="img__wrap">
  <img class="img__img" src="img1/itint.jpg" />
  <p class="img__description">This image looks super neat.</p>
</div>

解决方案

This code displays your 5 images and text on it.what probelem are you facing exaclty kindly explain

<div class="img__wrap">
  <img class="img__img" src="img1/itint.jpg" />
  <p class="img__description">This image looks super neat.</p>
</div><div class="img__wrap">
  <img class="img__img" src="img1/itint.jpg" />
  <p class="img__description">This image looks super neat.</p>
</div>
<div class="img__wrap">
  <img class="img__img" src="img1/itint.jpg" />
  <p class="img__description">This image looks super neat.</p>
</div><div class="img__wrap">
  <img class="img__img" src="img1/itint.jpg" />
  <p class="img__description">This image looks super neat.</p>
</div>

这篇关于如何在滚动图像上放置文字？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！