En el artículo anterior, utilizamos una imagen con un degradado hacia arriba y hacia abajo como fondo del título y le aplicamos un efecto de esquina redondeada. ¿Es cierto que este tipo de marco de esquinas redondeadas sólo se puede utilizar para fotografías relativamente monótonas? ¿Podemos también hacer que algunas imágenes con colores intensos sean transparentes y redondeadas?
La respuesta es sí, echemos un vistazo a su kung fu definitivo.
Primero echemos un vistazo a las representaciones finales :
Verá, esta es una imagen redondeada lograda con CSS puro. Para ver el efecto de transparencia, apliqué especialmente una imagen de fondo. Puede descargar este modelo a su computadora y cambiar el tamaño de la ventana como desee. transparente.
Con este efecto, ya no tendrá que preocuparse por redondear las esquinas de cada imagen. Este efecto se ve a menudo en algunas páginas de demostración basadas en imágenes y es especialmente adecuado para listas con muchas imágenes. ¡Qué tal, el efecto no es malo!
Bien, ¡echemos un vistazo a su mecanismo de implementación!
Principio de implementación:
Este efecto es en realidad la variante que implementé en el Capítulo 2. Hablemos de los códigos clave principales.
El cambio principal es la posición de la imagen de fondo, pero esta vez es un poco diferente a la del Capítulo 2. Esta vez debes tener en cuenta los cambios en las dos esquinas redondeadas a continuación.
Primero veamos la implementación de las dos esquinas redondeadas anteriores:
/*Posicionamiento de desplazamiento de imagen: la parte superior*/
.sharp b.b2{posición-fondo:-4px arriba;}
.sharp b.b3{posición-fondo:-2px -1px;}
.sharp b.b4{posición-fondo:-1px -2px;}
Mire la configuración de estilo de las dos esquinas redondeadas a continuación. La parte inferior y la parte superior se corresponden entre sí.
/*Posicionamiento de desplazamiento de imagen--parte inferior*/
.sharp b.b7{posición-fondo:-4px abajo;}
.sharp b.b6{posición-fondo:-2px abajo;}
.sharp b.b5{posición-fondo:-1px abajo;}
Diferentes estilos de llamadas de imágenes:
/*Esquema de color uno, estilo verde----------------------------------------*/
/*color del borde*/
.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,
.color1 .b7,.color1 .content{border-color:#262626;}
.color1 .b1, .color1 .b8{fondo:#262626;}
/*Ruta de la imagen*/
.color1 .b2,.color1 .b3,.color1 .b4,.color1 h3,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content{fondo:url(imagen/1.jpg) no -repetir;}
Las dos primeras oraciones juntas forman el valor de color del cuadro de borde, que debe establecerse en el mismo valor de color. La siguiente oración establece la ruta de llamada de la imagen.
Sólo tres frases para conseguir una combinación de colores.