สมมติว่าฉันต้องการตกแต่งลิงก์ไปยังไฟล์บางประเภทโดยใช้รูปภาพ ฉันสามารถประกาศลิงก์ของฉันเป็น

<a href='foo.pdf' class='pdflink'>A File!</a>

จากนั้นมี CSS เช่น

.pdflink:after { content: url('/images/pdf.png') }

ตอนนี้ใช้งานได้ดียกเว้นในกรณีpdf.pngที่ขนาดลิงก์ของฉันไม่เหมาะสม

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

การทางพิเศษแห่งประเทศไทย: ฉันกำลังโน้มตัวไปข้างหน้าก) การปรับขนาดภาพต้นฉบับให้เป็นขนาด "ถูกต้อง" ฝั่งเซิร์ฟเวอร์และ / หรือ b) การเปลี่ยนมาร์กอัปเพื่อส่งแท็ก IMG แบบอินไลน์ ฉันพยายามหลีกเลี่ยงทั้งสองสิ่ง แต่ดูเหมือนพวกเขาจะเข้ากันได้ดีกว่าการพยายามทำสิ่งต่าง ๆ ด้วย CSS เท่านั้น คำตอบสำหรับคำถามเดิมของฉันดูเหมือนจะเป็น "คุณสามารถเรียงลำดับของการทำมันบางครั้ง"

การปรับbackground-sizeได้รับอนุญาต อย่างไรก็ตามคุณยังต้องระบุความกว้างและความสูงของบล็อก

.pdflink:after {
    background-image: url('/images/pdf.png');
    background-size: 10px 20px;
    display: inline-block;
    width: 10px; 
    height: 20px;
    content:"";
}

ดูตารางความเข้ากันได้เต็มรูปแบบที่ MDNMDN

โปรดทราบว่า:afterองค์ประกอบหลอกเป็นกล่องซึ่งจะมีภาพที่สร้างขึ้น ไม่มีวิธีกำหนดสไตล์ของรูปภาพ แต่คุณสามารถจัดสไตล์กล่องได้

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

.pdflink:after {
    content: url('/images/pdf.png');
    transform: scale(.5);
}

http://jsfiddle.net/Nwupm/

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

เนื่องจากคำตอบอื่น ๆ ของฉันไม่ชัดเจนนักนี่เป็นความพยายามครั้งที่สอง:

มีสองวิธีในการตอบคำถาม

ใช้งานได้ (เพียงแสดงให้ฉันเห็นภาพ!

ลืมเกี่ยวกับ:afterตัวเลือกหลอกและไปสำหรับสิ่งที่ชอบ

.pdflink {
    min-height: 20px;
    padding-right: 10px;
    background-position: right bottom;
    background-size: 10px 20px;
    background-repeat: no-repeat;
}

ตามทฤษฎี

คำถามคือ: คุณสไตล์สามารถสร้างเนื้อหาได้หรือไม่? คำตอบคือ: ไม่คุณทำไม่ได้ มีการพูดคุยกันอย่างยาวนานในรายการส่งจดหมายของ W3Cในประเด็นนี้ แต่ยังไม่มีวิธีแก้ปัญหา

เนื้อหาที่สร้างจะแสดงผลลงในกล่องที่สร้างขึ้นและคุณสามารถจัดสไตล์กล่องนั้น แต่ไม่สามารถสร้างเนื้อหาดังกล่าวได้ เบราว์เซอร์ที่แตกต่างกันแสดงพฤติกรรมที่แตกต่างกันมาก

#foo         {content: url("bar.jpg"); width: 42px; height:42px;}  
#foo::before {content: url("bar.jpg"); width: 42px; height:42px;}

Chrome ปรับขนาดอันแรก แต่ใช้ขนาดที่แท้จริงของภาพเป็นครั้งที่สอง

Firefox และ ie ไม่สนับสนุนแรกและใช้มิติที่แท้จริงสำหรับที่สอง

โอเปร่าใช้มิติที่แท้จริงสำหรับทั้งสองกรณี

(จากhttp://lists.w3.org/Archives/Public/www-style/2011Nov/0451.html )

ในทำนองเดียวกันเบราว์เซอร์จะแสดงผลลัพธ์ที่แตกต่างอย่างมากในสิ่งต่างๆเช่นhttp://jsfiddle.net/Nwupm/1/ซึ่งมีองค์ประกอบมากกว่าหนึ่งรายการที่ถูกสร้างขึ้น โปรดทราบว่า CSS3 ยังอยู่ในช่วงเริ่มต้นของการพัฒนาและปัญหานี้ยังไม่ได้รับการแก้ไข

คุณควรใช้พื้นหลังแทนภาพ

.pdflink:after {
  content: "";
  background-image:url(your-image-url.png);
  background-size: 100% 100%;
  display: inline-block;

  /*size of your image*/
  height: 25px;
  width:25px;

  /*if you want to change the position you can use margins or:*/
  position:relative;
  top:5px;

}

diplay: block; ไม่มีผลกระทบใด ๆ

positionin ยังใช้งานได้แปลกมากกับฐานรากด้านหน้าดังนั้นโปรดระมัดระวัง

body:before{ 
    content:url(https://i.imgur.com/LJvMTyw.png);
    transform: scale(.3);
    position: fixed;
    left: 50%;
    top: -6%;
    background: white;
}

นี่คือวิธีแก้ปัญหาอื่น (ใช้งานได้): เพียงปรับขนาดภาพให้มีขนาดที่คุณต้องการ :)

.pdflink:after {
    display: block;
    width: 20px;
    height: 10px;
    content:url('/images/pdf.png');
}

คุณต้อง pdf.png เป็น 20px * 10px เพื่อใช้งานได้ 20px / 10px ใน css อยู่ที่นี่เพื่อให้ขนาดของบล็อกเพื่อให้องค์ประกอบที่มาหลังจากบล็อกไม่ได้ทั้งหมดสับสนกับภาพ

อย่าลืมเก็บภาพดิบในขนาดดั้งเดิม

.pdflink:after {
    background-image: url('/images/pdf.png');
    background-size: 10px 20px;
    width: 10px; 
    height: 20px;
    padding-left: 10px;// equal to width of image.
    margin-left:5px;// to add some space for better look
    content:"";
}

คุณสามารถใช้zoomคุณสมบัติ ตรวจสอบjsfiddle นี้

คุณสามารถเปลี่ยนความสูงหรือความกว้างขององค์ประกอบก่อนหรือหลังเช่นนี้

.element:after {
  display: block;
  content: url('your-image.png');
  height: 50px; //add any value you need for height or width
  width: 50px;
}

ฉันใช้ความกว้างการควบคุมขนาดตัวอักษรนี้

.home_footer1::after {
color: transparent;
background-image: url('images/icon-mail.png');      
background-size: 100%;      
content: ".......................................";
font-size: 30pt;
}

ทุกวันนี้ด้วยเฟล็กบ็อกซ์คุณสามารถทำให้โค้ดของคุณง่ายขึ้นและปรับพารามิเตอร์ 1 ตัวตามต้องการ:

.pdflink:after {
    content: url('/images/pdf.png');
    display: inline-flex;
    width: 10px;
}

ตอนนี้คุณสามารถปรับความกว้างขององค์ประกอบและความสูงจะปรับโดยอัตโนมัติเพิ่ม / ลดความกว้างจนกระทั่งความสูงขององค์ประกอบเป็นจำนวนที่คุณต้องการ

content: "";
background-image: url("yourimage.jpg");
background-size: 30px, 30px;