ในบทความก่อนหน้านี้ เราใช้รูปภาพที่มีการไล่ระดับสีขึ้นและลงเป็นพื้นหลังของชื่อเรื่อง และใช้เอฟเฟกต์มุมโค้งมน จริงหรือไม่ที่กรอบมุมโค้งมนชนิดนี้สามารถใช้ได้เฉพาะกับภาพที่น่าเบื่อเท่านั้น เราสามารถสร้างรูปภาพที่มีสีสันสดใสโปร่งใสและโค้งมนได้หรือไม่
คำตอบคือใช่ เรามาดูสุดยอดกังฟูของมันกันดีกว่า
มาดูการเรนเดอร์ขั้นสุดท้ายกันก่อน :
คุณเห็นไหมว่านี่คือรูปภาพทรงกลมที่ทำได้โดยใช้ CSS ล้วนๆ เพื่อให้เห็นเอฟเฟกต์โปร่งใส ฉันจึงใช้รูปภาพพื้นหลังเป็นพิเศษ คุณสามารถดาวน์โหลดโมเดลนี้ลงในคอมพิวเตอร์ของคุณและปรับขนาดหน้าต่างตามที่คุณต้องการ โปร่งใส.
ด้วยเอฟเฟกต์นี้ คุณจะไม่ต้องกังวลกับการปัดเศษมุมของแต่ละรูปภาพอีกต่อไป เอฟเฟกต์นี้มักพบเห็นได้ในหน้าสาธิตแบบรูปภาพบางหน้า และเหมาะอย่างยิ่งสำหรับรายการที่มีรูปภาพจำนวนมาก เอฟเฟ็กต์ก็ไม่เลวนะ!
เอาล่ะ มาดูกลไกการใช้งานของมันกันดีกว่า!
หลักการดำเนินการ:
เอฟเฟกต์นี้เป็นตัวแปรที่ฉันใช้ในบทที่ 2 เรามาพูดถึงรหัสคีย์หลักกันดีกว่า
การเปลี่ยนแปลงหลักคือการวางตำแหน่งของภาพพื้นหลัง แต่คราวนี้จะแตกต่างจากในบทที่ 2 เล็กน้อย คราวนี้คุณจะต้องคำนึงถึงการเปลี่ยนแปลงในมุมโค้งมนทั้งสองด้านล่างด้วย
ขั้นแรกเรามาดูการใช้งานมุมโค้งมนทั้งสองด้านบนกันก่อน:
/*การวางตำแหน่งชดเชยภาพ--ส่วนบน*/
.sharp b.b2{ตำแหน่งพื้นหลัง:-4px ด้านบน;}
.sharp b.b3{ตำแหน่งพื้นหลัง:-2px -1px;}
.sharp b.b4{ตำแหน่งพื้นหลัง:-1px -2px;}
ดูการตั้งค่าสไตล์ของมุมโค้งมนทั้งสองด้านล่าง
/*ตำแหน่งชดเชยภาพ--ส่วนล่าง*/
.sharp b.b7{ตำแหน่งพื้นหลัง: -4px ด้านล่าง;}
.sharp b.b6{ตำแหน่งพื้นหลัง: -2px ด้านล่าง;}
.sharp b.b5{ตำแหน่งพื้นหลัง: -1px ด้านล่าง;}
สไตล์การเรียกรูปภาพที่แตกต่างกัน:
/*โทนสีที่ 1 แบบสีเขียว -----------------------------------------------*/
/*สีขอบ*/
.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,
.color1 .b7,.color1 .content{สีเส้นขอบ:#262626;}
.color1 .b1,.color1 .b8{พื้นหลัง:#262626;}
/*เส้นทางรูปภาพ*/
.color1 .b2,.color1 .b3,.color1 .b4,.color1 h3,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content{พื้นหลัง:url(image/1.jpg) ไม่ -ทำซ้ำ;}
สองประโยคแรกรวมกันเป็นค่าสีของกล่องเส้นขอบ ซึ่งจะต้องตั้งค่าเป็นค่าสีเดียวกัน ประโยคต่อไปนี้จะกำหนดเส้นทางการเรียกรูปภาพ
เพียงสามประโยคเพื่อให้ได้โทนสี