整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML如何设置div背景图片的的透明度

这样一个需求,就是在一个DIV中包含有一个Image标签,但是在Div标签中包含有一张背景图片,设计图上的样子是这张背景图片是有一个透明度的,但是如果直接使用opacity属性设置的的话就会连Div中的内容的透明度也会受到影响,那么我们如何在HTML中设置div背景图片的透明度呢?,可以通过以下几种方法实现。

方法一:使用伪元素

这是在日常开发中被推荐使用的方法,通过这种方式实现不会影响到div中的其他内容的透明度只会影响它自己背景的透明度,详细实现如下。

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            position: relative;
            width: 300px;
            height: 200px;
            overflow: hidden;
        }

        .container::before {
            content: "";
            background-image: url('your-image.jpg');
            background-size: cover;
            background-position: center;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0.5; /* 调整透明度 */
            z-index: 1;
        }

        .content {
            position: relative;
            z-index: 2;
            color: white;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content">
            这里是内容
        </div>
    </div>
</body>
</html>

方法二:使用RGBA颜色叠加

这种方式比较适合那种需要给背景图片上添加蒙版的情况,但是笔者尝试的时候,结果实在是不尽人意。所以还是选择了上面的推荐方法,不过这种方式要比上面的那种方式实现起来要简单很多。如下所示。

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            width: 300px;
            height: 200px;
            background: rgba(255, 255, 255, 0.5) url('your-image.jpg') no-repeat center center;
            background-size: cover;
        }
    </style>
</head>
<body>
    <div class="container">
        这里是内容
    </div>
</body>
</html>

方法三:使用CSS滤镜

这种方式实现会影响到整个的div的样式,也就是说页面中的内容的透明度也会受到影响,并且这种影响不会被其他样式所改变。如下所示。

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            width: 300px;
            height: 200px;
            background: url('your-image.jpg') no-repeat center center;
            background-size: cover;
            filter: opacity(0.5); /* 调整透明度 */
        }
    </style>
</head>
<body>
    <div class="container">
        这里是内容
    </div>
</body>
</html>

以上就是实现如何调整div的背景透明度,在一些特殊场景中我们还可以通过JS的方式来实现。上面的方法中,推荐使用的是伪元素方法,因为它在修改了div背景透明度之后,并不会影响到其他的元素,RGBA色彩添加则是局限于一些色彩华丽的地方使用,而对于一些单色调的内容来讲这种方式实现效果不是太好。通过CSS过滤样式,虽然是最直接的方式,但是如果在div内部有内容的情况下会影响到整个组件体系的样式。

在实际开发中,我们可以选择合适的方式来实现这个需求。当然还有其他的实现方式,有兴趣的读者可以留言我们一起讨论。

文简介

点赞 + 关注 + 收藏 = 学会了


IText 是 Fabric.js 提供的一个 可编辑文本 的元素。



要设置文字颜色,可以设置 fill 。

但 fill 会设置所有文字的颜色,如果你只想修改指定文字的颜色,只用 fill 就不是那么容易实现了。

本文要讲的就是 设置指定文字的颜色和背景色


设置文字颜色或背景色,需要分情况讨论的:

  1. 全文设置
  2. 设置指定文字颜色(单行)
  3. 设置指定文字颜色(多行)

接下来就将上述情况逐一讲解。



起步

<canvas id="c" width="600" height="400" style="border: 1px solid #ccc;"></canvas>

<!-- 引入 Fabric.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/521/fabric.js"></script>

<script>
  // 初始化画布
  const canvas = new fabric.Canvas('c')

  // 创建文本
  const iText = new fabric.IText('hello world')

  // 将文本添加到画布里
  canvas.add(iText)
</script>
复制代码

首先把 Fabric.js 引入,然后初始化画布。如果对这个概念不太熟的话,可以看看 Fabric.js 从入门到膨胀。

最后通过 new fabric.IText 创建一段文字添加到画布中。


全文设置

// 省略部分代码

const iText = new fabric.IText('hello world', {
  fill: 'pink'
})
复制代码

fill 可以设置文字的填充颜色。在 Fabric.js 里是使用这个属性设置颜色的,和 css 设置文字颜色使用 color 不一样~



单行:设置指定文字颜色

const iText = new fabric.IText('hello world', {
  styles: {
    0: {
      1: {
        fill: '#f00' // 文字颜色,#f00是红色
      }
    }
  }
})
复制代码

第一次看到上面的代码时我也觉得有点奇怪,后来仔细看了下才发现这样设计的用意。

styles 是一个对象。

styles: { // 设置样式
  0: { // 第1行
    1: { // 第2个字符
      // 要设置的样式
    }
  }
}
复制代码

上面这段代码是这个意思。行号和字符位置都是从0开始算起,有点像数组下标的意思。

我们这个例子只有1行,所以行号是0。

e 的下标是 1 。所以上面的代码就把 e 设置成红色了。其他字符还是默认的颜色。



多行:设置指定文字颜色

const iText = new fabric.IText('hello\nworld', {
  styles: { // 设置样式
    0: { // 第1行
      1: {
        fill: '#f00' // 文字颜色
      }
    },
    1: { // 第2行
      2: {
        fill: 'hotpink'
      }
    }
  }
})
复制代码

IText 的换行是用 \n 来表达的。

这个例子要 修改第1行第2个字符的文字颜色为红色,第2行第3个字符为亮粉色

从代码里的注释应该可以看得懂本次操作。



设置文字背景色

const iText = new fabric.IText('hello world', {
  styles: {
  0: {
    1: {
      textBackgroundColor: 'yellowgreen', // 背景色
    }
  },
})
复制代码

和设置文字颜色的原理一样,只是把关键字改一改就行。

textBackgroundColor 翻译成中文就是文本背景色。



代码仓库

⭐Fabric 设置IText指定字符颜色和背景色



推荐阅读

《Fabric.js 笔刷到底怎么用?》

《Fabric.js 圆形笔刷》

《纯CSS 红砖背景墙》

《Fabric.js 自由绘制椭圆》

SS 可以添加背景颜色和背景图片,以及来进行图片设置。

  1. background-color 背景颜色
  2. background-image 背景图片地址
  3. background-repeat 是否平铺
  4. background-position 背景位置
  5. background-attachment 背景固定还是滚动
  6. 背景的合写(复合属性) background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

背景图片(image)

语法:

background-image : none | url (url) 

参数:

none :  无背景图(默认的)

url :  使用绝对或相对地址指定背景图像

background-image 属性允许指定一个图片展示在背景中(只有CSS3才可以多背景)可以和 background-color 连用。 如果图片不重复地话,图片覆盖不到地地方都会被背景色填充。 如果有背景图片平铺,则会覆盖背景颜色。

小技巧: 我们提倡 背景图片后面的地址,url不要加引号。

背景平铺(repeat)

语法:

background-repeat : repeat | no-repeat | repeat-x | repeat-y 

参数:

repeat :  背景图像在纵向和横向上平铺(默认的)

no-repeat :  背景图像不平铺

repeat-x :  背景图像在横向上平铺

repeat-y :  背景图像在纵向平铺

设置背景图片时,默认把图片在水平和垂直方向平铺以铺满整个元素。

repeat-x :  背景图像在横向上平铺

repeat-y :  背景图像在纵向平铺

设置背景图片时,默认把图片在水平和垂直方向平铺以铺满整个元素。

背景位置(position)

语法:

background-position : length || length
​
background-position : position || position 

参数:

length :  百分数 | 由浮点数字和单位标识符组成的长度值。请参阅长度单位

position :  top | center | bottom | left | center | right

说明:

设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为:(0% 0%)。

如果只指定了一个值,该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。

注意:

  1. position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。
  2. 如果和精确单位和方位名字混合使用,则必须是x坐标在前,y坐标后面。比如 background-position: 15px top; 则 15px 一定是 x坐标 top是 y坐标。

实际工作用的最多的,就是背景图片居中对齐了。

背景附着

语法:

background-attachment : scroll | fixed 

参数:

scroll :  背景图像是随对象内容滚动

fixed :  背景图像固定

说明:

设置或检索背景图像是随对象内容滚动还是固定的。

背景简写

background属性的值的书写顺序官方并没有强制标准的。为了可读性,建议大家如下写:

background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

background: transparent url(image.jpg) repeat-y scroll 50% 0 ;

背景透明(CSS3)

CSS3支持背景半透明的写法语法格式是:

background: rgba(0,0,0,0.3);

最后一个参数是alpha 透明度 取值范围 0~1之间

注意: 背景半透明是指盒子背景半透明, 盒子里面的内容不收影响。

导航栏案例

使用技巧:在一行内的盒子内,我们设定行高等于盒子的高度,就可以使文字垂直居中。