สร้างเอฟเฟกต์ภาพตัดปะในเบราว์เซอร์ด้วย CSS

Sep 15, 2025

วิธีการ

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

บทช่วยสอนการออกแบบเว็บไซต์จะดูที่คุณสมบัติ CSS สาม: ภาพหน้ากาก , เส้นทาง และ รูปร่างนอก . แม้ว่าคุณจะใช้พวกเขาไม่ต้องกังวล ฉันจะแสดงตัวอย่างที่จะช่วยให้คุณสร้างเอฟเฟกต์ที่คุณอาจไม่เคยเห็นในหลาย ๆ เว็บไซต์

กำลังมองหาการกวดวิชาประเภทอื่นหรือไม่ ดู วิธีการสร้างภาพตัดปะภาพใน Photoshop . และสำหรับไกด์ที่มีประโยชน์ให้ดูที่การเลือกของเรา สร้างเว็บไซต์ และ เว็บโฮสติ้ง บริการ.

ตัวอย่างแอนิเมชั่น CSS 18 อันดับแรก

แรงบันดาลใจที่ใหญ่ที่สุดของฉันในแง่ของการใช้คุณสมบัติที่กล่าวถึงเป็นภาพตัดปะแบบดั้งเดิม ฉันสงสัยว่าเป็นไปได้ที่จะสร้างพวกเขาในเว็บเบราว์เซอร์โดยไม่ต้องใช้งานบรรณาธิการหรือซอฟต์แวร์กราฟิกหรือไม่ ด้วยความมหัศจรรย์ของ CSS มันเป็นไปได้ทั้งหมด! โบนัสอีกครั้งในการสร้างพวกเขาด้วยรหัสคือการปรับขนาดได้เคลื่อนไหวและโต้ตอบ ก่อนที่คุณจะเริ่มตรวจสอบให้แน่ใจว่าคุณมีดังต่อไปนี้:

คุณจะต้องการ:

เครื่องมือเบราว์เซอร์และนักพัฒนาเว็บที่คุณชื่นชอบ - ฉันแนะนำให้ใช้ Google Chrome เนื่องจากรองรับคุณสมบัติทั้งหมดที่ฉันใช้ในบทช่วยสอนนี้
ตัวแก้ไขรหัส
สินทรัพย์เช่นรูปภาพหรือไฟล์ SVG - คุณสามารถดาวน์โหลดสิ่งที่เราใช้ในการกวดวิชานี้ ที่นี่

หน้ากากรูปภาพที่ทับซ้อนข้อความ

CSS masks example — หน้ากาก CSS ช่วยให้คุณสามารถสร้างเอฟเฟกต์พิเศษได้เช่นการเปิดใช้งานการมุ่งหน้าไซต์เพื่อเลือกและหายไปในขณะที่ผู้ใช้เลื่อนขึ้นและลงหน้าเว็บ (ตัดกันอิมเมจนี้ไปที่หนึ่งด้านบน)

การปิดบังเป็นคุณสมบัติแรกที่ฉันต้องการแสดงให้คุณเห็น ช่วยในการสร้างรูปร่างและเค้าโครงที่สร้างสรรค์มากขึ้นบนเว็บโดยบอกเบราว์เซอร์ของคุณว่าองค์ประกอบของสินทรัพย์ควรมองเห็น การปิดบังสามารถทำได้ในสามวิธีที่แตกต่างกัน: การใช้อิมเมจแรสเตอร์ (นั่นคือรูปแบบ PNG ที่มีชิ้นส่วนโปร่งใส) การไล่ระดับสี CSS; หรือองค์ประกอบ SVG โปรดทราบว่าแตกต่างจากอิมเมจแรสเตอร์ทั่วไป SVG สามารถปรับขนาดหรือเปลี่ยนรูปแบบได้โดยไม่ต้องสูญเสียคุณภาพอย่างมีนัยสำคัญ

สิ่งที่ฉันชอบเกี่ยวกับการปิดบังคือความสามารถในการใช้คุณสมบัติเดียวกันกับ พื้นหลัง - เราสามารถกำหนดตำแหน่งของหน้ากากขนาดและการทำซ้ำได้เช่นการใช้: หน้ากากซ้ำ: ไม่ทำซ้ำ และ ขนาดหน้ากาก: ปก .

ด้วยการปิดบัง CSS เราสามารถสร้างเอฟเฟกต์ที่ซับซ้อนมากขึ้นบนเว็บ หนึ่งในนั้นสามารถพบได้ในตัวอย่างของเราที่ส่วนหนึ่งของภาพครอบคลุมข้อความ เมื่อผู้ใช้เลื่อนขึ้นและลงหน้าบางส่วนของข้อความจะแสดง / ซ่อน สิ่งนี้ให้ความประทับใจว่าชื่อหน้าตั้งอยู่ด้านหลังภูเขา ในการสร้างเอฟเฟกต์นี้จำเป็นต้องใช้เทคนิคบางอย่างและการประยุกต์ใช้ที่ชาญฉลาดของมาสก์ CSS จะช่วยให้เราบรรลุเป้าหมายนั้น

มาสร้างส่วนหัวด้วยอิมเมจพื้นหลังที่เลือกและส่วนหัวสองข้างภายใน หนึ่งในนั้นจะเป็นหนึ่งหลัก (ระดับแรกของการมุ่งหน้า)

 & lt; หัว & gt;
        & lt; H3 & GT; นี่คือ & lt; / h3 & gt;
        & lt; h1 & gt; & lt; span & gt; การผจญภัยของฉัน & lt; / span & gt; & lt; / h1 & gt;
& lt; / ส่วนหัว & gt;

ข้อความของหัวเรื่องจะถูกเก็บไว้ใน & lt; span & gt; แท็ก. มันไม่ใช่เรื่องธรรมดา แต่ในกรณีนี้เรากำลังใช้กาวเพื่อมุ่งหน้าไปที่ภาชนะ

 ส่วนหัว {
    ความกว้าง: 100vw;
    ความสูง: 80VH;
    ด้านบน: 0;
    ซ้าย: อัตโนมัติ;
    พื้นหลัง: URL (.. / รูปภาพ / landscape.jpg) ศูนย์ด้านบนไม่ซ้ำ;
    ขนาดพื้นหลัง: ปก;
}
h1 {
    หน้ากาก: URL (../ รูปภาพ / Mask.svg # maskid);
    -webkit-mask: URL (../ รูปภาพ / ภูมิทัศน์ -Ask.png)
ศูนย์ด้านบนไม่ทำซ้ำ;
    ขนาดหน้ากาก: ปก;
    -webkit-mask- ขนาด: ปก;
    ความกว้าง: 100vw;
    ความสูง: 80VH;
    สี: #FFF;
    ขนาดตัวอักษร: 100px;
    ตำแหน่ง: ญาติ;
}
h1 span {
    ตำแหน่ง: แก้ไข;
    จอแสดงผล: บล็อกแบบอินไลน์;
    จัดเรียงข้อความ: กึ่งกลาง;
    ตัวอักษรตระกูล: 'Libre Baskerville', Serif;
    ความกว้าง: 100vw;
    ด้านบน: 80px;
    แบบอักษรสไตล์: อิตาลี;
}

ตัดภาพโดยใช้ CSS Clipping

CSS clipping example — เส้นทางการตัดเพื่อให้คุณตัดภาพพืชในตัวอย่างนี้

มาสำรวจตัวอย่างอื่นและค้นหาข้อมูลเพิ่มเติมเกี่ยวกับการตัด CSS ในระยะสั้นตัดนิยามพื้นที่ภาพใดที่ควรมองเห็น การตัดคล้ายกับสับกระดาษ ขอบเขตของรูปร่างเรียกว่าเส้นทางคลิป: สิ่งใดก็ตามที่อยู่นอกเส้นทางจะถูกซ่อนอยู่ในขณะที่ทุกสิ่งภายในเส้นทางจะปรากฏขึ้น ด้วยเส้นทางคลิปคุณสามารถลบพื้นหลังออกจากภาพของคุณแทนที่จะใช้ไฟล์ PNG ที่มีน้ำหนักมาก สำหรับสิ่งนี้เราจำเป็นต้องเตรียมรูปร่างสำหรับการตัดออกแล้ว

เป้าหมายในแบบฝึกหัดนี้คือการคลิปพืชออกจากภาพลบพื้นหลัง เราสามารถคัดลอกรหัส SVG จากไฟล์ของเราและวางลงในเอกสาร HTML เส้นทางคลิปจะต้องอยู่ภายใน & lt; defs & gt; & lt; / defs & gt; แท็ก.

 & lt; SVG & GT;
  & lt; defs & gt;
      & lt; clippath id = "clip-plant" & gt;
     & lt; path d = "m293.2,524.8c0,3.3,0 ... [และมากกว่า]" & gt;
     & lt; / clippath & gt;
  & lt; / defs & gt;
& lt; / svg & gt;
& lt; div class = "พืช" & gt; & lt; / div & gt;

ต่อมาเราสามารถอ้างอิงเส้นทางที่กำหนดไว้ในรหัส SVG ได้อย่างง่ายดายโดยการเพิ่ม url ฟังก์ชั่น.

 .plant {
    ความสูง: 700px;
    พื้นหลังภาพ: URL (.. / รูปภาพ / plant.jpg);
    ขนาดพื้นหลัง: ปก;
    ตำแหน่ง: ญาติ;
    พื้นหลังซ้ำ: ไม่ทำซ้ำ;
    -webkit-clip-path: URL ("# clip-plant");
    Clip-Path: URL ("# clip-plant");}

คิดนอกกรอบ

clipping in CSS example — คุณสามารถใช้ได้ **รูปร่างภายใน** และ **รูปร่างนอก** เพื่อสร้างรูปร่างทุกชนิด

ใครบอกว่าภาชนะบรรจุข้อความจะต้องเป็นรูปสี่เหลี่ยมผืนผ้าเสมอ? เนื้อหาสามารถตัดเป็นรูปร่างที่แตกต่างกันทุกประเภทโดยใช้ รูปร่างนอก และ รูปร่างภายใน คุณสมบัติที่ช่วยให้คุณต้องห่อเนื้อหาของคุณรอบ ๆ เส้นทางที่กำหนดเองใน CSS

ดังนั้นมันทำงานอย่างไร เพียงแค่ใช้ รูปร่างนอก ไปยังภาพหรือภาชนะที่ลอยอยู่ เป็นสิ่งสำคัญที่จะต้องทราบว่า ลอย คุณสมบัติและขนาดขององค์ประกอบ - ความสูงหรือความกว้าง - ต้องกำหนดมิฉะนั้นจะไม่ทำงาน คุณสามารถใช้ URL () ฟังก์ชั่นซึ่งเปิดใช้งาน รูปร่างนอก อสังหาริมทรัพย์เพื่อกำหนดรูปร่างองค์ประกอบตามเส้นทางจากไฟล์ SVG

 .- ตัวอักษร {
    ภาพพื้นหลัง: URL ('../ รูปภาพ / gold-bg.jpg');
    ขนาดพื้นหลัง: 1,000px;
    -webkit-mask- รูปภาพ: URL ('../ รูปภาพ / A- ตัวอักษร 2.svg');
    -webkit-mask-composite: แหล่งที่มา;
    -webkit-mask- ทำซ้ำ: ไม่ทำซ้ำ;
    -Webkit-mask- ขนาด: 300px;
    ความกว้าง: 100%;
    ความสูง: 60vh;
    ตำแหน่ง: ญาติ;
    ด้านบน: 0px;
    สิ่งที่แนบมาพื้นหลัง: แก้ไข;
    ลอย: ซ้าย;
    จอแสดงผล: บล็อกแบบอินไลน์;
    ความกว้าง: 310px;
    Shape-Margin: 23px;
    รูปร่างนอก: URL ('../ รูปภาพ / Mask.svg');
}

ที่ รูปร่างนอก ทรัพย์สินไม่เปลี่ยนแปลงอะไรเกี่ยวกับองค์ประกอบอื่นที่ไม่ใช่พื้นที่ลอย ซึ่งหมายความว่ารูปพรมแดนและภาพพื้นหลังใด ๆ จะไม่ปรับให้เข้ากับรูปร่างที่สร้างขึ้นบนองค์ประกอบ นี่คือเหตุผลที่เราต้องใช้ ภาพหน้ากาก คุณสมบัติ - เพื่อตัดพื้นหลังขององค์ประกอบเพื่อให้ตรงกับรูปร่างที่กำหนด

สิ่งสำคัญที่ควรทราบคือ รูปร่างนอก คุณสมบัติใช้งานได้กับไฟล์ที่เปิดใช้งาน Cors เท่านั้น Cors ย่อมาจากการแบ่งปันทรัพยากร Cross Origin

ในกรณีนี้วิธีที่ดีที่สุดในการดูคือการใช้ localhost มิฉะนั้นจะไม่ทำงานหากคุณเพิ่งเปิดในเบราว์เซอร์ของคุณ

เมื่อทำการทดลองโปรดจำไว้ว่าคุณสมบัติที่กล่าวถึงทั้งหมดไม่ได้รับการสนับสนุนจากทุกเบราว์เซอร์ทั้งหมดดังนั้นจึงคุ้มค่าที่จะตรวจสอบพวกเขา ที่นี่ . ตัวอย่างล่าสุดไม่ทำงานใน Firefox, Opera และ IE แต่หวังว่าจะสามารถใช้ได้เร็ว ๆ นี้สำหรับเบราว์เซอร์ทั้งหมด และหากคุณมีเอกสารจำนวนมากในการจัดเก็บโครงการของคุณให้ปลอดภัยอย่างปลอดภัย การจัดเก็บเมฆ .

อ่านเพิ่มเติม:

เริ่มต้นด้วยฟอนต์ตัวแปรใน CSS
คู่มือที่ครอบคลุมในการใช้กริด CSS
วิธีการใช้งาน CSS ใหม่เพื่อลองตอนนี้

สร้างเอฟเฟกต์ภาพตัดปะในเบราว์เซอร์ด้วย CSS

คุณจะต้องการ:

หน้ากากรูปภาพที่ทับซ้อนข้อความ

ตัดภาพโดยใช้ CSS Clipping

คิดนอกกรอบ

วิธีการ - บทความยอดนิยม

เคล็ดลับการพัฒนาภาพ: เล่าเรื่องด้วยงานศิลปะของคุณ

วิธีการวาดแมว

วิธีการปั้นจมูกมนุษย์ใน zbrush: 4 ขั้นตอนง่าย ๆ

Speed Sculpt Creature ใน ZBrush

สร้างส่วนประกอบม้าหมุนที่ยืดหยุ่น

วิธีการออกแบบแบบฟอร์มตอบสนองและไม่เชื่อเรื่องพระเจ้า

วิธีการย้ายระหว่าง Daz Studio และ Cinema 4D

วิธีการสร้างโลกสำหรับโรงภาพยนตร์

หมวดหมู่