วิธีซ่อนรูปภาพดิจิทัลในเว็บเพจ

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

1

เปิดเอกสาร HTML ที่มีภาพอย่างน้อยหนึ่งภาพและค้นหาส่วนเนื้อหาของเอกสาร แท็กรูปภาพของส่วนเนื้อหาจะปรากฏคล้ายกับที่แสดงด้านล่าง:

แท็กรูปภาพพื้นฐานที่เริ่มต้นด้วยคำว่า "img" แท็กในตัวอย่างนี้อ้างอิงรูปภาพชื่อ“ img / การตั้งค่าใหม่ของธุรกิจ / 167 / วิธีซ่อนดิจิตอลภาพ - เว็บ - หน้า - 2.jpg”

2

เปลี่ยนหนึ่งในแท็กรูปภาพของคุณเพื่อให้มันอ้างอิงคลาส CSS ชื่อ“ การมองเห็น” ดังที่แสดงในตัวอย่างต่อไปนี้:

หากแท็กมีการอ้างอิงระดับแล้วคุณจะต้องเปลี่ยนแท็กด้วยวิธีที่แตกต่างกันเล็กน้อย สมมติว่าแท็กของคุณปรากฏดังแสดงด้านล่าง:

แท็กรูปภาพนั้นอ้างอิงคลาสที่ชื่อ“ myclass” หากแท็ก img ของคุณอ้างอิงคลาสแล้วเช่นนี้ให้ผนวก "การมองเห็น" หลังจากชื่อคลาสดังที่แสดงด้านล่าง:

3

วางสิ่งต่อไปนี้ลงในส่วนหัวของเอกสารของคุณ:

สิ่งนี้จะสร้างคลาสการมองเห็นและตั้งค่าแอตทริบิวต์การแสดงผลเป็น "บล็อก" ค่าดังกล่าวจะทำให้มองเห็นภาพได้

4

บันทึกเอกสารและเปิดในเบราว์เซอร์ใดก็ได้ ภาพของคุณจะปรากฏตามปกติ

5

กลับไปที่เครื่องมือแก้ไขของคุณและค้นหารหัส CSS ที่คุณเพิ่มไว้ในส่วนหัวของเอกสาร เปลี่ยนค่าของแอ็ตทริบิวต์การแสดงผลจาก“ block” เป็น "none" และบันทึกเอกสาร

6

กลับไปที่เบราว์เซอร์ของคุณและกด“ Ctrl-F5” เพื่อล้างที่เก็บข้อมูลชั่วคราว เมื่อรีเฟรชหน้ารูปภาพของคุณจะหายไป

เคล็ดลับ

• เพิ่มการอ้างอิงชั้นเรียนให้กับแต่ละภาพที่คุณต้องการซ่อน ตั้งชื่อคลาส CSS ของคุณตามที่คุณต้องการ ชื่อของมันคือ "การมองเห็น" ในตัวอย่างนี้
• ทำให้ภาพของคุณปรากฏอีกครั้งโดยเปลี่ยนคำว่า "none" เป็น "block"