ซ่อนข้อความโดยใช้ CSS

ฉันมีแท็กใน html ของฉันเช่นนี้:

<h1>My Website Title Here</h1>

ใช้ css ฉันต้องการแทนที่ข้อความด้วยโลโก้จริงของฉัน ฉันมีโลโก้ที่ไม่มีปัญหาผ่านการปรับขนาดแท็กและวางภาพพื้นหลังในทาง css อย่างไรก็ตามฉันไม่สามารถหาวิธีกำจัดข้อความได้ ฉันเคยเห็นมันทำมาก่อนโดยการผลักข้อความออกจากหน้าจอ ปัญหาคือฉันไม่สามารถจำได้ว่าฉันเห็นมันที่ไหน

นี่คือวิธีหนึ่ง:

h1 {
    text-indent: -9999px;                 /* sends the text off-screen */
    background-image: url(/the_img.png);  /* shows image */
    height: 100px;                        /* be sure to set height & width */
    width: 600px;
    white-space: nowrap;            /* because only the first line is indented */
}

h1 a {
    outline: none;  /* prevents dotted line when link is active */
}

นี่เป็นอีกวิธีในการซ่อนข้อความโดยหลีกเลี่ยงกล่องขนาดใหญ่ 9999 พิกเซลที่เบราว์เซอร์จะสร้าง:

h1 {
    background-image: url(/the_img.png);  /* shows image */
    height: 100px;                        /* be sure to set height & width */
    width:  600px;

    /* Hide the text. */
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

ทำไมไม่ใช้เพียง:

h1 { color: transparent; }

เพียงเพิ่มfont-size: 0;องค์ประกอบของคุณที่มีข้อความ

.hidden { font-size: 0; }

  font-size: 0; hides text. <span class="hidden"> You can't see me :) </span>

วิธีที่เป็นมิตรข้ามเบราว์เซอร์มากที่สุดคือการเขียน HTML เป็น

<h1><span>Website Title</span></h1>

จากนั้นใช้ CSS เพื่อซ่อนช่วงและแทนที่ภาพ

h1 {background:url(/nicetitle.png);}
h1 span {display:none;}

หากคุณสามารถใช้ CSS2 ได้มีวิธีที่ดีกว่าในการใช้contentคุณสมบัตินี้ แต่น่าเสียดายที่เว็บยังไม่ได้ 100%

การซ่อนข้อความโดยคำนึงถึงความสามารถในการเข้าถึง:

นอกจากคำตอบอื่น ๆ แล้วนี่เป็นอีกวิธีที่มีประโยชน์ในการซ่อนข้อความ

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

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

มันคุ้มค่าที่ชี้ให้เห็นว่าชั้นนี้ถูกนำมาใช้ในขณะนี้เงินทุน 3

หากคุณสนใจที่จะอ่านเกี่ยวกับการช่วยการเข้าถึง:

• Web Accessibility Initiative (WAI)

• เอกสารประกอบการเข้าถึง MDN

Jeffrey Zeldman แนะนำวิธีแก้ไขปัญหาต่อไปนี้:

.hide-text {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

ควรใช้ทรัพยากรน้อยกว่า -9999px;

โปรดอ่านทั้งหมดได้ที่นี่:

http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/

ดูmezzoblueสำหรับบทสรุปที่ดีของแต่ละเทคนิคด้วยจุดแข็งและจุดอ่อนรวมถึงตัวอย่าง html และ css

วิธีแก้ปัญหาที่ซับซ้อนมากมาย

วิธีที่ง่ายที่สุดคือใช้:

color:rgba(0,0,0,0)

คุณสามารถซ่อนข้อความโดยเพิ่มแอททริบิวต์นี้:

font size: 0 !important;

ห้ามใช้{ display:none; }เพราะทำให้เนื้อหาไม่สามารถเข้าถึงได้ คุณต้องการให้โปรแกรมอ่านหน้าจอเห็นเนื้อหาของคุณและจัดรูปแบบให้เห็นได้ด้วยการแทนที่ข้อความด้วยรูปภาพ (เช่นโลโก้) โดยการใช้text-indent: -999px;หรือวิธีการที่คล้ายกันข้อความยังคงอยู่ที่นั่น - ไม่มองเห็นที่นั่น ใช้display:noneแล้วข้อความก็หายไป

<style>
body {
     visibility:hidden
}
body .moz-signature p{
    visibility:visible
}
</style>

ผลงานดังกล่าวข้างต้นใช้งานได้ดีในธันเดอร์เบิร์ดล่าสุด

คุณสามารถใช้background-imageคุณสมบัติcss และz-indexตรวจสอบให้แน่ใจว่าภาพอยู่ด้านหน้าข้อความ

ทำไมคุณไม่ใช้:

<li><a href="#">bla</a></li>

a {
    opacity: 0.0;
    font-size: 1px;
}

li {
    background-image: url('test.jpg');
}

หากคุณยังไม่มีส่วนขยายหรือส่วน div มันจะทำงานได้อย่างสมบูรณ์แบบสำหรับลิงก์

คำตอบคือการสร้างช่วงที่มีคุณสมบัติ

{display:none;}

คุณสามารถหาตัวอย่างได้ที่เว็บไซต์นี้

อันที่จริงแล้วนี่เป็นพื้นที่สำหรับการอภิปรายโดยมีเทคนิคที่ละเอียดอ่อนมากมาย เป็นสิ่งสำคัญที่คุณต้องเลือก / พัฒนาเทคนิคที่ตรงกับความต้องการของคุณรวมถึง: โปรแกรมอ่านหน้าจอ, รูปภาพ / css / การรวมสคริปต์เปิด / ปิดการรวม, seo เป็นต้น

ต่อไปนี้เป็นแหล่งข้อมูลที่ดีในการเริ่มต้นใช้เทคนิคการเปลี่ยนรูปภาพมาตรฐาน:

http://faq.css-standards.org/Image_Replacement

http://www.alistapart.com/articles/fir

http://veerle.duoh.com/blog/links/#l-10

แท็กใช้เงื่อนไขการใช้เบราว์เซอร์ที่แตกต่างกันและการใช้ CSS คุณมีไปยังสถานที่ height:0pxและยังให้คุณได้ไปยังสถานที่width:0pxfont-size:0px

หากประเด็นคือทำให้ข้อความภายในองค์ประกอบไม่สามารถมองเห็นได้ให้ตั้งค่าแอตทริบิวต์สีให้มีความทึบ 0 โดยใช้ค่า rgba เช่นcolor:rgba(0,0,0,0);clean และ simple

ฉันจำไม่ได้ว่าตัวเองหยิบมาที่ไหน แต่ใช้งานได้สำเร็จนานหลายปี

  =hide-text()
    font: 0/0 a
    text-shadow: none
    color: transparent

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

h1 {
    text-indent: -3000px; 
    line-height: 3000px;
    background-image: url(/LOGO.png);
    height: 100px; width:  600px;  /* height and width are a must */

}

ลองใช้รหัสนี้เพื่อย่อและซ่อนข้อความ

.hidetxt{

  width: 346px;
  display: table-caption;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: no-drop;
  
}

.hidetxt:hover { 

  visibility: hidden;
  
}

<div class="hidetxt">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when</p>
</div>

หรือเพื่อซ่อนการใช้งานในคลาส css ของคุณ .hidetxt { visibility: hidden; }

repalce เนื้อหาด้วย CSS

 h1{  font-size: 0px;}
 h1:after {
    content: "new content";
    font-size: 15px;
  }

ฉันมักจะใช้:

span.hide
{
  position:fixed;
  right:-5000px;
}

หากเราสามารถแก้ไขมาร์กอัปชีวิตได้ง่ายขึ้นเพียงแค่ลบข้อความและมีความสุข แต่บางครั้งมาร์กอัปถูกวางโดยรหัส JS หรือเราไม่ได้รับอนุญาตให้แก้ไขเลย css ที่แย่เกินไปกลายเป็นอาวุธเดียวที่เราวางขาย

เราไม่สามารถวาง<span>ข้อความและซ่อนแท็กทั้งหมดได้ เบราว์เซอร์บางตัวไม่เพียง แต่ซ่อนองค์ประกอบdisplay:noneแต่ยังปิดใช้งานส่วนประกอบภายในด้วย

ทั้งสองfont-size:0pxและcolor:transparentอาจเป็นโซลูชันที่ดี แต่เบราว์เซอร์บางตัวไม่เข้าใจ เราไม่สามารถพึ่งพาพวกเขาได้

ฉันแนะนำ:

h1 {
  background-image: url(/LOGO.png);  /* Our image */
  text-indent: -3000px;  /* Send text out of viewable area */
  height: 100px; width: 600px;  /* height and width are a must, agree */
  overflow:hidden;  /* make sure our size is respected */
}

การใช้overflow:hiddenบังคับความกว้างและความสูงของเรา เบราว์เซอร์บางตัว (จะไม่ตั้งชื่อพวกเขา ... IE ) อาจจะอ่านกว้างและความสูงเป็นและmin-width min-heightฉันต้องการป้องกันไม่ให้ขยายกล่อง

การใช้ค่าศูนย์สำหรับfont-sizeและline-heightในองค์ประกอบทำให้ฉัน:

<style>
    .text {
        display: block;
        width: 200px;
        height: 200px;

        font-size: 0;
        line-height: 0;
    }
</style>

<span class="text">
    Invisible Text
</span>

เพื่อซ่อนข้อความจาก html ใช้คุณสมบัติ text-indent ใน css

.classname {
 text-indent: -9999px;
 white-space: nowrap; 
}

/ * สำหรับข้อความไดนามิกที่คุณต้องเพิ่ม white-space ดังนั้น css ที่คุณใช้จะไม่ถูกรบกวน nowrap หมายความว่าข้อความจะไม่ถูกตัดบรรทัดถัดไปข้อความจะดำเนินต่อไปในบรรทัดเดียวกันจนกว่า<br>จะพบแท็ก

หนึ่งในวิธีที่ผมประสบความสำเร็จนี้คือการใช้หรือ:before :afterฉันใช้วิธีนี้เป็นเวลาหลายปีและใช้งานได้ดีกับไอคอนเวกเตอร์สัญลักษณ์

h1 {
    position: relative;
    text-indent: -9999px;                 /* sends the text off-screen */
    }
h1:before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: block;
    width: 600px;
    height: 100px;
    content: ' ';
    background: transparent url(/the_img.png) 0 0 no-repeat;
    }

สิ่งนี้ใช้ได้สำหรับฉันด้วยการขยาย (การตรวจสอบที่น่าพิสมัย

<span class="validationMessage">This field is required.</span>

.validationMessage {
    background-image: url('images/exclamation.png');
    background-repeat: no-repeat;
    margin-left: 5px;
    width: 16px;
    height: 16px;
    vertical-align: top;

    /* Hide the text. */
    display: inline-block;
    overflow: hidden;
    font-size: 0px;
}

ทางออกสำหรับฉัน:

HTML

<div class="website_title"><span>My Website Title Here</span></div>

CSS

.website_title {
    background-image: url('../images/home.png');
    background-repeat: no-repeat;
    height: 18px;
    width: 16px;
}

.website_title span {
    visibility: hidden;
}

คำตอบที่ดีที่สุดใช้งานได้กับข้อความสั้น ๆ แต่ถ้าหากมีการพันคำแล้วมันจะปรากฏในรูปภาพ

วิธีหนึ่งในการทำเช่นนี้คือตรวจจับข้อผิดพลาดด้วยตัวจัดการ jquery ลองโหลดรูปภาพหากล้มเหลวจะทำให้เกิดข้อผิดพลาด

$('#logo img').error(function(){
    $('#logo').html('<h1>My Website Title Here</h1>');
});

ดูรหัสตัวอย่าง

h1{
   background:url("../images/logo.png") no-repeat;
   height:180px;
   width:200px;
   display:inline-block;
   font-size:0px !important;
   text-intent:-9999999px !important;
   color:transparent !important;
 }