-- 创造无限可能

css:设置背景图片技巧

2023-09-26 10:37:46
1418 人浏览 0 人点赞
有用,点赞支持一下

问题:为什么在css里使用background-image插入背景图片时,浏览器没有任何反应?

错误写法:

  1. 插入背景图片的路径写错了。
    background-image: url(/img/科技.jpg);
    

正确写法:

background-image: url('./img/科技.jpg');

问题:背景图片太大显示不全。

解决思路:

  1. 通过设置div的大小大于背景图片的大小,使背景图片完全显示;

    body {
    width: 200px;
    height: 200px;
    ckground-image: url('./img/科技.jpg');
    }
    
  2. 使用background-size属性将背景图片的大小设置为小于div的大小。

    body {
     background-image: url('./img/科技.jpg');
     background-size: cover;
    }