css change image

CSS is a very important part of web design. It can add various effects to web pages, including changing images. In this article, we’ll dive into how to change images using CSS.

There are two ways to change images in CSS: using the background-image attribute, or using the img tag. We will discuss these two methods separately.

Using the background-image attribute

The background-image attribute allows us to use CSS to specify a background image, which can be set for different elements. The following are some CSS codes that use the background-image attribute:

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

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

These codes will specify the background of the web page and the background of the title bar as images in jpg format respectively.

We can further control the position and size of the image by using the background-position and background-size properties. For example, the following CSS code will place a 100x100 pixel image into a 50x50 pixel div and position it in the upper right corner of the div:

div {
    background-image: url('image.jpg');
    background-size: 100px 100px;
    background-position: top right;
}

These properties also support other values, such as background-repeat is used to control how images are repeated within an element, and background-color can mix images and colors together.

Use the img tag

Another way is to use the img tag to insert images into the web page, and then use CSS to change their style. Here are some examples of using the img tag:

<img src="/static/imghwm/default1.png"  data-src="image.jpg"  class="lazy" alt="My image">

The src attribute here is used to specify the URL of the image, and the alt attribute is used to provide an alternative text when the image cannot be loaded.

We can use CSS to further change the style of these images. For example, the following CSS code will add a 3-pixel red border to all images:

img {
    border: 3px solid red;
}

We can also use the CSS transform property to rotate, scale, or translate images. For example, the following CSS code rotates the image 45 degrees clockwise:

img {
    transform: rotate(45deg);
}

There are also some other transform values ​​to choose from, such as scale, translate, etc.

Summary

In this article, we took a deep dive into how to use CSS to change images. We introduced two basic ways: using the background-image attribute and using the img tag, and how to use other CSS properties to further change the style of the image. These techniques can play an important role in web design, allowing us to better control and use images.

The above is the detailed content of css change image. For more information, please follow other related articles on the PHP Chinese website!