背景图片属性

xiaoxiao2021-04-17 51

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> div{ height: 300px; border: 1px solid fuchsia; /*背景颜色*/ background-color: antiquewhite; /*背景图片*/ background-image: url("../img/Lenovo.jpg"); /*背景图片的展示方式 no-repeat repeat-x repeat-y */ background-repeat:no-repeat; /*背景图片位置偏移量 (两个参数)水平方向的偏移，垂直方向的偏移（一个参数px）水平方向的偏移，垂直方向居中 center 正居中 center top中上 right top右上等等*/ background-position:center top; /*背景图片的大小图片填充整个背景(有失真) 100% 100% contain 宽高等比例缩放，直到宽或高填满父布局，可能出现图片填充不完整（不一定填满整个背景) cover：宽高等比例缩放，知道较小的宽或高填满父布局，可能出现图片溢出（一定填满整个背景) */ background-size: cover; background-size: contain； } </style> <title>背景图片属性</title> </head> <body> <div></div> </body> </html>

转载请注明原文地址: https://ju.6miu.com/read-674071.html

技术

最新回复(0)