Page layout picture background with IMG tag use

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.