CSS难题:background-image和border-image同时使用时,background-image会被border-image盖住,怎么解决

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS难题:background-image和border-image同时使用时,background-image会被border-image盖住,怎么解决相关的知识,希望对你有一定的参考价值。

有什么方法让background-image显示在border-image上面,遮住border-image,只有边框处显示出border-image,中间显示background-image?
测试网页代码如下:

<html>
<head>
<title>I want background-image overlap border-image</title>
</head>
<body>
<style type="text/css">
.background_overlap_border_image

border-width: 16px 16px 16px 16px;
-moz-border-image: url(test_files/border-image.png) 16 16 16 16 stretch stretch;
-moz-border-radius: 16px;
background-image: url(test_files/background-image.png);
background-position: center;
background-repeat: no-repeat;
width: 213px;
height: 213px;

</style>
<button class="background_overlap_border_image">I want background-image overlap border-image</button>
</body>
</html>

将上面的代码保存到test.html中,然后在同级目录建一个test_files文件夹,再将border-image.png和background-image.png拷到test_files文件夹中,最后用firefox打开test.html就可以看到效果。附上图片:
border-image.png
background-image.png
我这里对border-image.png作了半透明处理,所以网页上能够透过border-image看到下面的background-image,但是如果想换用不透明的border-image,下面的background-image就看不到了。望高手指点迷津,在下感激不尽!

你可以把border-image.png中间镂空,然后在CSS中用border-image的时候,下刀的位置刚好是镂空位置的边缘,就可以实现你要的效果,如下图:


当然,效果的好坏处决于你所镂空的位置、下刀的位置和设置border的大小

追问

你这种方法基本可以实现我想要的效果,但不能算是从根本上解决,而只能算是绕过去了。当background-image不是矩形而是不规则图形时(比如将我的background-image.png顺时针旋转45度,背景色设为透明),你这个方法就有问题了。这时候background-image和border-image之间会出现空白,而不能做到无缝连接,效果如下图:

不过貌似也没有别的好办法了,难道真的无解?

追答

border-image这个属性的层级似乎无法调整,它总会把background盖住;其实要实现你的效果,可以不用border-image,改用backgroud双背景去实现

参考技术A 这样很麻烦,你还不如在切图的时候解决呢。

img 和 background-image 优劣比较

一. 简单来说,img是内容部分的东西,css的background-image是修饰性的东西。

img------从页面元素来说,如果是页面中的图片是作为内容出现的,比如广告图片,比如产品图片,那么这个必然是用img了,因为这个是页面元素内容。页面元素内容最关键的一点就是,当页面没有样式的时候,还是能一眼看过去就知道什么是什么……

background-image---背景图片,修饰性的内容,在页面中可有可无。有,是为了让页面中视觉感受上更美;无,并不影响用户浏览网页获取内容。

二. 区别

1、background-image是背景图片,是css的一个样式。

     <img/>是一个块状的元素,是html的一个标签

2、<img/>是一个dom对象,可以使用js进行元素的操作。背景图片不占位置。

3、一般来说,如果是装饰性的图片就使用background-img,如果和文体内容很相关就使用<img/>。

      操作背景图片  ,document.getElementById("id").style.backgroundImage = "url("+currentImage+")";//currentImage图片地  址变量。

      获取css属性document.getElementById("id").style.backgroundImage。

4、在网页中的加载顺序不一样,html中的标签<img/>是网页结构(内容)的一部分会在加载结构的过程中加载,  以css背景图存在的图片background-image会等到dom结构加载完成(网页的内容标签全部显示以后)才开始加载,  既网页会先加载标签<img/>的内容,再加载背景图片background-image。如果你用引入了一个很大的图片,那么在  这个图片下载完成之前,img后的内容都不会显示。而如果用css来引入同样的图片,网页结构和内容加载完成之后  ,才开始加载背景图片,不会影响你浏览网页内容。

 

5、选择的时候也要兼顾seo和标签语义化,logo最好同时使用背景图和<img/>标签。

三.js操作

操作标签<img/>

1、设置属性document.getElementsByTagName("img")[0].setAttribute("src","newSrc"); 获取属性document.getElementsByTagName("img")[0].getAttribute("src");

 

或者:设置document.getElementsByTagName("img")[0].src="newSrc"; 获取document.getElementsByTagName("img")[0].src;

 

获取与设置宽高:document.getElementsByTagName("img")[0].style.width;document.getElementsByTagName  ("img")[0].style.width = "320px";

 

2、图片居中:一般来说可以用CSS中的①“text-align:center属性,②margin:0 auto或③定位属性”(position)就可以居中。 但是主要看是看你的页面布局是怎样的,是否用了定位。根据这些来判断到顶使用怎样的方法来使元素居中。 设置background属性,详细参考

  1、background-image:url("");//设置图片的背景图片

  2、background-color:#***||colorName||rgba(,,,);//设置背景色

  3、background-position:center;//设置背景图片在父元素中的显示位置,如果您仅规定了一个关键词,那么第二个值将是"center"。接受三种值,百分比||描述值||像素值;

  4、background-repeat:repeat||repeat-x||repeat-y||no-repeat||inherit;

  5、background-origin: padding-box|border-box|content-box;//规定 background-position 属性相对于什么位置来定位。

  6、background-clip: border-box|padding-box|content-box;//background-clip 属性规定背景的绘制区域。剪裁的依据。

   7、background-attachment:scroll||fixed||inherit;//属性设置背景图像是否固定或者随着页面的其余部分滚动。

  8、background-size:cover;//设置了图片背景no-repeat之后,使用这个属性可以让图片平铺。详细讲解background-size

 

以上是关于CSS难题:background-image和border-image同时使用时,background-image会被border-image盖住,怎么解决的主要内容,如果未能解决你的问题,请参考以下文章

CSS中background-image属性无效,怎么解决?

CSS background-image的定义和用法

如何将多种 URL 类型添加到`background-image` CSS 属性?

1.CSS background属性与background-image属性

background-image背景图片怎么用css缩小

css background-image 显示不完整问题