เขียนข้อความ (ที่มีพื้นหลังกึ่งโปร่งใส) มากกว่าภาพ

ผลกระทบที่ค่อนข้างสามัญเพื่อดูเว็บไซต์และบล็อกรุ่นต่อไป, มีการเขียนในการแสดงข้อมูลที่เรียกว่ามากกว่าภาพที่มักจะมาพร้อมพื้นหลังสีดำโปร่งแสง นี่คือตัวอย่าง :

ในบทความนี้เราจะทำให้การเขียนทับของภาพของเราโดยใช้ CSS

สิ่งแรกที่ต้องทำคือการสร้างโครงสร้างของ HTM​​L เช่นนี้

 class="boximg"> <div



  



 <img border="0" src="tramonto.jpg"/>



  



 class="boxtesto"> <div



    



 <span class="testo"> พระอาทิตย์ตกที่สวยงาม! </ span>



  



 </ div>







 </ div>

ที่คุณสามารถดูฉันสร้างภาชนะ DIV (มีคลาส"Boximg.") ภายในระยะเวลาที่ฉันวางตำแหน่งภาพของฉันและ div ใหม่ (ที่มีระดับ"Boxtesto.") ซึ่งในทางกลับมีช่วงที่ทำเครื่องหมายข้อความที่คุณต้องการนำไปใช้ .

ให้เราตอนนี้เห็น CSS ที่, สาระสำคัญ, สถานที่ทำงานที่ :

 . Boximg {



  



 ตำแหน่ง : ญาติ;



  



 กว้าง : 400px; / * ความกว้างเท่ากันของรูป * /



  



 ความสูง : 300px; / * ความสูงของภาพเดียวกัน * /







 }







 {div.boxtesto



  



 position : absolute;



  



 ด้านล่าง : 0px;



  



 ซ้าย : 0px;



  



 ความกว้าง : 100%;



  



 พื้นหลัง : rgb (0, 0, 0);



  



 พื้นหลัง : RGBA (0, 0, 0, 0.6);







 }







 {span.testo



  



 padding : 10px;



  



 สี : # FFFFFF;



  



 แบบอักษร : ตัวหนา 24px/45px Helvetica, sans - serif;



  



 ระยะห่างตัวอักษร : - 1px;







 }

กล่องที่จัดเก็บ ("Boximg.") มีขนาดเดียวกันและตำแหน่งที่สัมพันธ์กับภาพที่มีวัตถุประสงค์เพื่อรองรับการ
กล่องเก็บของข้อความที่ ("Boxtesto.") เป็นจุดเน้นของการทำงานของเราที่มีตำแหน่งแน่นอนซึ่งจะเอาออกมาจากการไหลปกติขององค์ประกอบและถูกวางในมุมซ้ายด้านล่างของภาชนะบรรจุและเห็นได้ชัดว่ามีความกว้างถึง 100% เพื่อครอบครองพื้นที่ว่างทั้งในแนวนอน ที่น่าสนใจแล้วทั้งสองคำจำกัดความของพื้นหลังการใช้ RGB และ RGBA ที่ให้บริการในการกำหนดพื้นหลังสีดำและกึ่งโปร่งใส
ช่วง."ข้อความ"ในที่สุดได้มีวัตถุประสงค์เพียงอย่างเดียวเพื่อ Stylize ข้อความและนำไปใช้ขยาย'เล็ก ๆ น้อย ๆ

• <<
• 1
• 2
• >>