mix-blend-mode及background-blend-mode實現炫酷的圖片樣式
阿新 • • 發佈:2018-12-22
在網上看到了有如相機功能的mix-blend-mode實現比較好看的圖片樣式,自己也想弄下,在這裡記錄下
1.效果圖
2.mix-blend-mode相關屬性
{ mix-blend-mode: normal; // 正常 mix-blend-mode: multiply; // 正片疊底 mix-blend-mode: screen; // 濾色 mix-blend-mode: overlay; // 疊加 mix-blend-mode: darken; // 變暗 mix-blend-mode: lighten; // 變亮 mix-blend-mode: color-dodge; // 顏色減淡 mix-blend-mode: color-burn; // 顏色加深 mix-blend-mode: hard-light; // 強光 mix-blend-mode: soft-light; // 柔光 mix-blend-mode: difference; // 差值 mix-blend-mode: exclusion; // 排除 mix-blend-mode: hue; // 色相 mix-blend-mode: saturation; // 飽和度 mix-blend-mode: color; // 顏色 mix-blend-mode: luminosity; // 亮度 mix-blend-mode: initial; mix-blend-mode: inherit; mix-blend-mode: unset; }
3.在css上加mix-blend-mode
- html檔案
<div id="root"> <select id="select"> <option value ="normal">normal -- 正常</option> <option value ="multiply">multiply -- 正片疊底</option> <option value="screen">screen -- 濾色</option> <option value="overlay">overlay -- 疊加</option> <option value="darken">darken -- 變暗</option> <option value="lighten">lighten -- 變亮</option> <option value="color-dodge">color-dodge -- 顏色減淡</option> <option value="color-burn">color-burn -- 顏色加深</option> <option value="hard-light">hard-light -- 強光</option> <option value="soft-light">soft-light -- 柔光</option> <option value="difference">difference -- 差值</option> <option value="exclusion">exclusion -- 排除</option> <option value="hue">hue -- 色相</option> <option value="saturation">saturation -- 飽和度</option> <option value="color">color -- 顏色</option> <option value="luminosity">luminosity -- 亮度</option> </select> <div class="container"> <div class="item mode1"></div> <div class="item mode2"></div> <div class="item mode3"></div> </div> </div> <script> (function() { let selectElement = document.getElementById('select'); let item = document.getElementsByClassName('item'); selectElement.addEventListener('change', function() { for(let i = 0; i < item.length; i++) { item[i].style.cssText = 'mix-blend-mode:' + selectElement.value; } }); })() </script>
- css樣式
.container{ position: relative; margin: 140px auto; width: 120px; height: 120px; } .item{ position: absolute; top: 0; left: 0; width: 100px; height: 100px; border-radius: 50%; mix-blend-mode: normal; } .mode1{ transform: translateX(30%); background: rgba(255, 0, 255, .8); } .mode2{ transform: translateX(-30%); background: rgba(0, 255, 255, .8); } .mode3{ transform: translateY(-50%); background: rgba(0, 255, 0, .8); } #select{ position: absolute; left: 500px; top: 100px; }
4.使用background-blend-mode
- css檔案
.root {
width: 400px;
height: 500px;
margin: 20px auto;
background: url(../images/22.jpg),
url(https://user-images.githubusercontent.com/8554143/34369175-c14ae23e-eaf4-11e7-96f1-e146e5e5a96b.jpg);
background-size: cover;
/*background-blend-mode: lighten;*/
}
#root{
position: absolute;
top: 50px;
left: 50px;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
/* 下拉框包含層 */
#selectedItem{
width: 240px;
cursor: pointer;
}
/* 已選中的選項 */
#promptText{
position: relative;
padding-left: 10px;
width: 230px;
height: 30px;
line-height: 30px;
border: 1px solid #d3d3d3;
border-radius: 4px;
background: #fff;
color: #999;
font-size: 14px;
}
/* 圖示 */
#arrows{
position: absolute;
top: 0;
right: 0;
width: 30px;
height: 30px;
vertical-align: middle;
}
#arrows:focus{
outline: none;
}
/* 下拉可選項包含層 */
.choiceDescription{
position: absolute;
display: none;
/*overflow: hidden;*/
margin-top: 2px;
width: 240px;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 1px 6px rgba(0, 0, 0, .1);
background: #fff;
}
.show{
display: block;
}
/* 下拉可選項 */
.item{
height: 30px;
line-height: 30px;
padding-left: 10px;
font-size: 15px;
color: #666;
}
.item:hover, .active{
color: #fff;
background: rgba(49, 255, 195, 0.67);
}
- html檔案
<div class="root"></div>
<div id="root">
<div id="selectedItem">
<div id="promptText"><span id="spanText">請選擇你喜歡的文字</span><img src="../images/arrowup.png" id="arrows" /></div>
<ul class="choiceDescription">
<li class="item">normal--正常</li>
<li class="item">multiply--正片疊底</li>
<li class="item">screen--濾色</li>
<li class="item">overlay--疊加</li>
<li class="item">darken--變暗</li>
<li class="item">lighten--變亮</li>
<li class="item">color-dodge--顏色減淡</li>
<li class="item">color-burn--顏色加深</li>
<li class="item">hard-light--強光</li>
<li class="item">soft-light--柔光</li>
<li class="item">difference--差值</li>
<li class="item">exclusion--排除</li>
<li class="item">hue--色相</li>
<li class="item">saturation--飽和度</li>
<li class="item">color--顏色</li>
<li class="item">luminosity--亮度</li>
</ul>
</div>
</div>
<script>
(function() {
let rootElement = document.getElementsByClassName('root');
let choiceDescription = document.getElementsByClassName('choiceDescription')[0];
let arrows = document.getElementById('arrows');
/* 用於判斷是否是下拉 */
let isDown = false;
let selectedItem = document.getElementById('selectedItem');
/* 對點選下拉進行監聽 */
selectedItem.addEventListener('click', function() {
isDown = !isDown;
if(isDown) {
/* 如果是下拉狀態,則顯示下拉的選項,並把圖示顯示為向下的圖示 */
choiceDescription.className += ' show';
arrows.src = '../images/arrowdown.png';
} else {
choiceDescription.className = 'choiceDescription';
arrows.src = '../images/arrowup.png';
}
/* 對已經選中的選項進行標記 */
let itemElement = document.getElementsByClassName('item');
let promptText = document.getElementById('spanText');
for(let i = 0; i < itemElement.length; i++) {
itemElement[i].className = 'item';
if(promptText.innerHTML == itemElement[i].innerHTML) {
itemElement[i].className = 'item active';
}
}
});
choiceDescription.addEventListener('click', function(e) {
let promptText = document.getElementById('spanText');
let selectElement = e.target;
/* 判斷是否點選的是li標籤,防止點選了li標籤以外的空白位置 */
while(selectElement.tagName !== 'LI') {
/* 如果點中的是當前容器層 */
if(selectElement == choiceDescription) {
selectElement = null;
break;
}
/* 若果不是,則再找父級容器 */
selectElement = selectElement.parentNode;
}
/* innerText、innerHTML、value
* innerText 是指html標籤裡的文字資訊,單純的文字,不會有html標籤,存在相容性
* innerHTML 是指包含在html標籤裡的所有子元素,包括空格、html標籤
* value 表單裡的元素屬性值
* */
if(selectElement) {
promptText.innerHTML = e.target.innerHTML;
rootElement[0].style.cssText = 'background-blend-mode:' + e.target.innerHTML.split('--')[0];
}
});
})()
</script>
5.注意點
- mix-blend-mode及background-blend-mode存在相容性