在css里使用background-image:url(图片地址)没有反应，但是在标签body里添

Posted 2023-04-21

在css里使用background-image:url(图片地址)没有反应，但是在标签body里添加属性background加图片地址就会显示出来。是怎么回事

如果css文件与html文件不在同一个文件夹就会出现这样的情况，图片文件路径如果是相对路径，那么它放在html中就是相对于html文件所在的路径，而放在css文件中则是相对于css文件所在的路径。比如 index.htm 文件放在网站根目录，style.css 文件则放在css目录中，图片 123.jpg 放在image目录中，那么在html文件的body中使用 background="image/123.jpg"完全没问题，但是，如果直接把"image/123.jpg"放到 style.css 文件中就不行了，要改为 background-image:url(../image/123.jpg) ，意思就是本文件（即style.css）所在目录的上级目录的image子目录中的123.jpg文件。 参考技术A background-image:只能有一个图片地址属性，background，可以设置很多其他的样式的属性，你看看是不是background-image:多加了其他的属性，还不对贴完整代码 参考技术B 那是因为你在设置background属性的同时没有设置标签的width,height宽高。而且如果是用在类似span,label标签还需要设置display:block;
放在body标签里生效是因为body 默认宽高都是100%

LESS

 Less：

基于CSS的一种扩展技术，包含变量、混合、函数、运算，可以简化CSS代码，降低维护成本。必须通过解析器将less文件转换为css文件供页面使用。

1、  步骤

新建一个文件夹，在文件夹里新建html、less文件（至始至终不会建立CSS文件）

启动Koala

配置路径

在less文件里写内容，刷新koala软件会自动生成css文件

在html里引入生成的css文件

在less里也可以引入文件，用@import

2、  变量

@名称:值

属性名：@名称

@border:1px solid black;

@background:green;

@outline:1px solid black;

 

div{

  border:@border;

  background: @background;

}

 

3、混合Mixins(针对通用的属性集,多个不同属性)，.名称{属性名+属性值（声明）}

////任何 CSS class, id 或者 元素 属性集都可以以同样的方式引入。

////class属性集

.widthHeight{

  width: 200px;

  height: 200px;

}

////id属性集

#fontsize{

  font-size: 30px;

}

 

//元素属性集

div{

  font-weight: bolder;

}

 

 

div{

  .widthHeight;

  #fontsize;

}

 

//

4、带参数的混合(调用多个参数，值可变,属性集合)，.名称（参数）{属性名：参数}

////调用参数

.backgroundUrl(@url){

  background: @url;

}

5、给参数设置默认值

.borderRadius(@length:10px){

  border-radius: @length;

  -webkit-border-radius: @length;

  -moz-border-radius: @length;

}

 

div{

  .backgroundUrl(url("1.jpg"));

  .borderRadius;

}

 

6、不带参数的属性集

//

.pAll(){

  font-size: 40px;

  color: #0000FF;

  font-weight: bolder;

  border: 1px solid black;

  width: 100px;

  height: 100px;

}

 

p{

  .pAll;

}

//

7、多参数混合

////使用逗号作为参数分隔符意味着可以将逗号分隔的一组值作为一个变量处理。换句话说，如果编译器在混合的定义或者是调用中找到至少一个分号，就会假设参数是使用分号分隔的，所有的逗号都属于参数中的一组值的分隔符。

////2个参数，每个参数都含有通过逗号分隔的一组值的情况：.name(1, 2, 3; something, else)。

////3个参数，每个参数只含一个数字的情况：.name(1, 2, 3)。

////   使用一个象征性的分号可以创建一个只含一个参数，但参数包含一组值的混合：.name(1, 2, 3;)。

////    逗号分隔的一组值参数的默认值：.name(@param1: red, blue;)。

////   使用同样的名字和同样数量的参数定义多个混合是合法的。在被调用时，LESS会应用到所有可以应用的混合上。比如你调用混合时只传了一个参数.mixin(green)，那么所有只强制要求一个参数的混合都会被调用：

//

//

////多参数混合

.mixin(@margin;@padding){

  margin: @margin;

  padding: @padding;

}

p{

  .mixin(50px;100px)

}