整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
這樣一個(gè)需求，就是在一個(gè)DIV中包含有一個(gè)Image標(biāo)簽，但是在Div標(biāo)簽中包含有一張背景圖片，設(shè)計(jì)圖上的樣子是這張背景圖片是有一個(gè)透明度的，但是如果直接使用opacity屬性設(shè)置的的話就會(huì)連Div中的內(nèi)容的透明度也會(huì)受到影響，那么我們?nèi)绾卧贖TML中設(shè)置div背景圖片的透明度呢？，可以通過以下幾種方法實(shí)現(xiàn)。
這是在日常開發(fā)中被推薦使用的方法，通過這種方式實(shí)現(xiàn)不會(huì)影響到div中的其他內(nèi)容的透明度只會(huì)影響它自己背景的透明度，詳細(xì)實(shí)現(xiàn)如下。
<!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; /* 調(diào)整透明度 */
z-index: 1;
}
.content {
position: relative;
z-index: 2;
color: white;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
這里是內(nèi)容
</div>
</div>
</body>
</html>這種方式比較適合那種需要給背景圖片上添加蒙版的情況，但是筆者嘗試的時(shí)候，結(jié)果實(shí)在是不盡人意。所以還是選擇了上面的推薦方法，不過這種方式要比上面的那種方式實(shí)現(xiàn)起來要簡(jiǎn)單很多。如下所示。
<!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">
這里是內(nèi)容
</div>
</body>
</html>這種方式實(shí)現(xiàn)會(huì)影響到整個(gè)的div的樣式，也就是說頁(yè)面中的內(nèi)容的透明度也會(huì)受到影響，并且這種影響不會(huì)被其他樣式所改變。如下所示。
<!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); /* 調(diào)整透明度 */
}
</style>
</head>
<body>
<div class="container">
這里是內(nèi)容
</div>
</body>
</html>以上就是實(shí)現(xiàn)如何調(diào)整div的背景透明度，在一些特殊場(chǎng)景中我們還可以通過JS的方式來實(shí)現(xiàn)。上面的方法中，推薦使用的是偽元素方法，因?yàn)樗谛薷牧薲iv背景透明度之后，并不會(huì)影響到其他的元素，RGBA色彩添加則是局限于一些色彩華麗的地方使用，而對(duì)于一些單色調(diào)的內(nèi)容來講這種方式實(shí)現(xiàn)效果不是太好。通過CSS過濾樣式，雖然是最直接的方式，但是如果在div內(nèi)部有內(nèi)容的情況下會(huì)影響到整個(gè)組件體系的樣式。
在實(shí)際開發(fā)中，我們可以選擇合適的方式來實(shí)現(xiàn)這個(gè)需求。當(dāng)然還有其他的實(shí)現(xiàn)方式，有興趣的讀者可以留言我們一起討論。
點(diǎn)贊 + 關(guān)注 + 收藏 = 學(xué)會(huì)了
IText 是 Fabric.js 提供的一個(gè) 可編輯文本 的元素。
要設(shè)置文字顏色，可以設(shè)置 fill 。
但 fill 會(huì)設(shè)置所有文字的顏色，如果你只想修改指定文字的顏色，只用 fill 就不是那么容易實(shí)現(xiàn)了。
本文要講的就是 設(shè)置指定文字的顏色和背景色。
設(shè)置文字顏色或背景色，需要分情況討論的：
接下來就將上述情況逐一講解。
<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')
// 創(chuàng)建文本
const iText = new fabric.IText('hello world')
// 將文本添加到畫布里
canvas.add(iText)
</script>
復(fù)制代碼首先把 Fabric.js 引入，然后初始化畫布。如果對(duì)這個(gè)概念不太熟的話，可以看看 Fabric.js 從入門到膨脹。
最后通過 new fabric.IText 創(chuàng)建一段文字添加到畫布中。
// 省略部分代碼
const iText = new fabric.IText('hello world', {
fill: 'pink'
})
復(fù)制代碼fill 可以設(shè)置文字的填充顏色。在 Fabric.js 里是使用這個(gè)屬性設(shè)置顏色的，和 css 設(shè)置文字顏色使用 color 不一樣~
const iText = new fabric.IText('hello world', {
styles: {
0: {
1: {
fill: '#f00' // 文字顏色，#f00是紅色
}
}
}
})
復(fù)制代碼第一次看到上面的代碼時(shí)我也覺得有點(diǎn)奇怪，后來仔細(xì)看了下才發(fā)現(xiàn)這樣設(shè)計(jì)的用意。
styles 是一個(gè)對(duì)象。
styles: { // 設(shè)置樣式
0: { // 第1行
1: { // 第2個(gè)字符
// 要設(shè)置的樣式
}
}
}
復(fù)制代碼上面這段代碼是這個(gè)意思。行號(hào)和字符位置都是從0開始算起，有點(diǎn)像數(shù)組下標(biāo)的意思。
我們這個(gè)例子只有1行，所以行號(hào)是0。
e 的下標(biāo)是 1 。所以上面的代碼就把 e 設(shè)置成紅色了。其他字符還是默認(rèn)的顏色。
const iText = new fabric.IText('hello\nworld', {
styles: { // 設(shè)置樣式
0: { // 第1行
1: {
fill: '#f00' // 文字顏色
}
},
1: { // 第2行
2: {
fill: 'hotpink'
}
}
}
})
復(fù)制代碼IText 的換行是用 \n 來表達(dá)的。
這個(gè)例子要 修改第1行第2個(gè)字符的文字顏色為紅色，第2行第3個(gè)字符為亮粉色 。
從代碼里的注釋應(yīng)該可以看得懂本次操作。
const iText = new fabric.IText('hello world', {
styles: {
0: {
1: {
textBackgroundColor: 'yellowgreen', // 背景色
}
},
})
復(fù)制代碼和設(shè)置文字顏色的原理一樣，只是把關(guān)鍵字改一改就行。
textBackgroundColor 翻譯成中文就是文本背景色。
?Fabric 設(shè)置IText指定字符顏色和背景色
《Fabric.js 筆刷到底怎么用？》
《Fabric.js 圓形筆刷》
《純CSS 紅磚背景墻》
《Fabric.js 自由繪制橢圓》
SS 可以添加背景顏色和背景圖片，以及來進(jìn)行圖片設(shè)置。
背景圖片(image)
語法：
background-image : none | url (url)
參數(shù)：
none : 無背景圖（默認(rèn)的）
url : 使用絕對(duì)或相對(duì)地址指定背景圖像
background-image 屬性允許指定一個(gè)圖片展示在背景中（只有CSS3才可以多背景）可以和 background-color 連用。 如果圖片不重復(fù)地話，圖片覆蓋不到地地方都會(huì)被背景色填充。 如果有背景圖片平鋪，則會(huì)覆蓋背景顏色。
小技巧： 我們提倡 背景圖片后面的地址，url不要加引號(hào)。
背景平鋪（repeat）
語法：
background-repeat : repeat | no-repeat | repeat-x | repeat-y
參數(shù)：
repeat : 背景圖像在縱向和橫向上平鋪（默認(rèn)的）
no-repeat : 背景圖像不平鋪
repeat-x : 背景圖像在橫向上平鋪
repeat-y : 背景圖像在縱向平鋪
設(shè)置背景圖片時(shí)，默認(rèn)把圖片在水平和垂直方向平鋪以鋪滿整個(gè)元素。
repeat-x : 背景圖像在橫向上平鋪
repeat-y : 背景圖像在縱向平鋪
設(shè)置背景圖片時(shí)，默認(rèn)把圖片在水平和垂直方向平鋪以鋪滿整個(gè)元素。
背景位置(position)
語法：
background-position : length || length ? background-position : position || position
參數(shù)：
length : 百分?jǐn)?shù) | 由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長(zhǎng)度值。請(qǐng)參閱長(zhǎng)度單位
position : top | center | bottom | left | center | right
說明：
設(shè)置或檢索對(duì)象的背景圖像位置。必須先指定background-image屬性。默認(rèn)值為：(0% 0%)。
如果只指定了一個(gè)值，該值將用于橫坐標(biāo)。縱坐標(biāo)將默認(rèn)為50%。第二個(gè)值將用于縱坐標(biāo)。
注意：
實(shí)際工作用的最多的，就是背景圖片居中對(duì)齊了。
背景附著
語法：
background-attachment : scroll | fixed
參數(shù)：
scroll : 背景圖像是隨對(duì)象內(nèi)容滾動(dòng)
fixed : 背景圖像固定
說明：
設(shè)置或檢索背景圖像是隨對(duì)象內(nèi)容滾動(dòng)還是固定的。
背景簡(jiǎn)寫
background屬性的值的書寫順序官方并沒有強(qiáng)制標(biāo)準(zhǔn)的。為了可讀性，建議大家如下寫：
background:背景顏色 背景圖片地址 背景平鋪 背景滾動(dòng) 背景位置
background: transparent url(image.jpg) repeat-y scroll 50% 0 ;
背景透明(CSS3)
CSS3支持背景半透明的寫法語法格式是:
background: rgba(0,0,0,0.3);
最后一個(gè)參數(shù)是alpha 透明度 取值范圍 0~1之間
注意： 背景半透明是指盒子背景半透明， 盒子里面的內(nèi)容不收影響。
導(dǎo)航欄案例
使用技巧：在一行內(nèi)的盒子內(nèi)，我們?cè)O(shè)定行高等于盒子的高度，就可以使文字垂直居中。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
