天津储鑫盛钢材现货供应商 发表于 2024-12-20 07:47:43

前端vue中div设置background图片铺满div

利用CSS中的background-size属性和background-image属性来实现将图片作为一个div的背景图并撑满屏幕的结果
利用background-image属性给div设置背景图片:
   div {
  background-image: url("图片路径");
}
利用background-size属性设置背景图片的巨细。要使背景图片撑满整个屏幕,可以将它的值设置为cover:
   div {
  background-image: url("图片路径");
  background-size: cover;
}
对div设置宽度和高度都:
   div {
  background-image: url("图片路径");
  background-size: cover;
  width: 15%;
  height: 60%;
}
如果利用background-size:cover属性不行,尝试background-size:contain属性
   div {
    height: 60%;
    width: 15%;
    /* 指定背景图片路径 */
    background-image: url(/src/assets/images/1.png);
    background-size: contain;
    /* 使背景图片始终固定在元素的中心 */
    background-position: center;
    /* 背景图片不重复 */
    background-repeat: no-repeat;
}

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
页: [1]
查看完整版本: 前端vue中div设置background图片铺满div