Personal suggestions at the same time to write background images and img tags, both SEO and in high Contrast mode can also display the picture normally. The specific code is later mended ...
One advantage of using is that users can conveniently right-click on the logo or copy the link to the logo image.
class="logo"> <!-- 注意 a 标签不要加 title,会造成部分读屏软件重复读取 --> <a tabindex="2" accesskey="1" href="#"> src="http://www.w3.org/2008/site/images/logo-w3c-screen-lg" alt="W3C"> <span class="alt-logo">W3C</span> </a>
. logoA{Background:URL (http://www.w3.org/2008/site/images/logo-w3c-screen-lg)No-repeat00;Display:Block;Width:249px;Height:107px;Position:Relative;Overflow:Hidden;Margin:10pxAuto;}. logoImg{Color:#fff;}. logo. Alt-logo{Position:Absolute;Z-index:-1;left: 0top: 0right: 0bottom: 0padding-left: 22pxpadding-top: 25pxfont-size: 50pxcolor #fff background-color: #075F9F ;}
The role of The. Alt-logo is to display an alternate text when the picture fails to load, and if it is only compatible with IE8, you can use: after pseudo-element instead.
Turn from the slightest
Links: https://www.zhihu.com/question/20990026/answer/16834377
the difference between a CSS background image and HTML insert img1. The image written in the CSS is in the form of a background image, and the IMG written in the HTML is in the form of a label, and in the process of loading the web page, the image that exists in the CSS background will wait until the structure is loaded (the contents of the page are all displayed) before it starts to Load. The IMG tag in HTML is a part of the Web page structure (content) that is loaded during the loading of the Structure. 2. Usually non-content images are written in CSS (to decorate the elements of the page), if the content of the picture is written in the html, for example, you want to make a beautiful frame of the album. Then the frame of the picture is written in the css, the picture frame inside the content is written in the Html. 3. Picture as the background, when the picture is not loaded or failed to load, there will not be a picture of the placeholder tag, will not appear red Fork.
Page layout picture background with IMG tag use