Synchronous appearance of two images with CSS buttons

Source: Internet
Author: User
The button image is implemented through image exchange, but there is a problem: loading an image first, but loading the other one is slow, and the effect is poor. This is an online solution to achieve pre-loading of CSS images:
<Style>
# Preloadedimages {
Width: 0px;
Height: 0px;
Display: inline;
Background-image: URL (path/to/image1.png );
Background-image: URL (path/to/image2.png );
Background-image: URL (path/to/image3.png );
Background-image: URL (path/to/image4.png );
Background-image: URL ();
}
</Style>
<Div id = "preloadedimages"> </div>

I didn't use this because I have special requirements and it doesn't matter if loading is slow. However, make sure that the two images of the buttons either do not appear or appear at the same time, that is, they must be synchronized. Therefore, the method I used is to put the two images together and use the background image offset method to control the image switching. CSSCodeAs follows:
# Okbtn {
Display: block;
Width: 100%;
Height: 100%;
Background-image: URL (../images/login_ OK .jpg );
Background-repeat: No-Repeat;
}
# Okbtn: hover {
Background-image: URL (../images/login_ OK .jpg );
Background-repeat: No-Repeat;
Background-position: right bottom;
}

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.