In the previous article, we used an image with an up and down gradient as the background of the title and applied a rounded corner effect to it. Is it true that this kind of rounded corner frame can only be used for relatively monotonous pictures? Can we also make some pictures with rich colors transparent and rounded?
The answer is yes, let’s take a look at its ultimate kung fu.
Let’s take a look at the final renderings first :
You see, this is a rounded image achieved with pure CSS. In order to see the transparency effect, I specially applied a background image. You can download this model to your computer and resize the window as you like. See if the outer fillet is transparent.
With this effect, you no longer have to worry about rounding the corners of each picture. This effect is often seen in some picture-based demo pages, and is especially suitable for lists with a lot of pictures. How about it, the effect is not bad!
Okay, let’s take a look at its implementation mechanism!
Implementation principle:
This effect is actually the variant I implemented in Chapter 2. Let’s talk about the main key codes.
The main change is the positioning of the background image, but this time it is a little different from the one in Chapter 2. This time you need to take into account the changes in the two rounded corners below.
Let’s first look at the implementation of the two rounded corners above:
/*Picture offset positioning--the upper part*/
.sharp b.b2{background-position:-4px top;}
.sharp b.b3{background-position:-2px -1px;}
.sharp b.b4{background-position:-1px -2px;}
Look at the style settings of the two rounded corners below. The lower part and the upper part correspond to each other.
/*Picture offset positioning--lower part*/
.sharp b.b7{background-position:-4px bottom;}
.sharp b.b6{background-position:-2px bottom;}
.sharp b.b5{background-position:-1px bottom;}
Different image calling styles:
/*Color scheme one, green style----------------------------------------*/
/*Border color*/
.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,
.color1 .b7,.color1 .content{border-color:#262626;}
.color1 .b1,.color1 .b8{background:#262626;}
/*Picture path*/
.color1 .b2,.color1 .b3,.color1 .b4,.color1 h3,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content{background:url(image/1.jpg) no -repeat;}
The first two sentences together form the color value of the border box, which needs to be set to the same color value. The following sentence sets the calling path of the image.
Just three sentences to get a color scheme.