網頁上要秀一張圖，第一個想到的是 `<img src=xxx>` 這個方式，後來才發現有個更好用的，叫做 background-image , 雖然知道有些特別的用法，卻一直沒有去深入瞭解, 所以在這做個小筆記!

```
$mmcode(r1)
```

<div class="mmresult r1">
<style>
/*
   background 可以設定很多張圖片，只需用逗號分隔, 
   上下層是由上而下，第一個圖片會在最上方
*/
.a07171_aa
{
  width:20em;
  height:10em;
  background-color: #ff0;
  background-image: url(https://yiharng.github.io/bomb.png)
                   ,url(https://yiharng.github.io/bird.jpg);
  background-position: 0em 0em,2em 0em;
  background-size: 5em 5em,16em 10em;
  background-repeat: repeat, no-repeat;
}
/*
   可以用下面這個方式合併來寫
*/
.a07171_bb
{
  width:20em;
  height:10em;
  background:url(https://yiharng.github.io/bomb.png) 0em 0em/5em 5em repeat
      , #ff0 url(https://yiharng.github.io/bird.jpg) 2em 0em/16em 10em no-repeat;
  
  /*
      注意那個 #ff0 背景顏色設定，必須在最後一個才能設定
  */
}
</style>

背景圖片不一定要用圖片，也可以用 repeating-linear-gradient 和 repeating-radial-gradient 來產生線性漸層或圓形漸層的背景, 如果再控制好大小和座標，基本上可以用來畫圖了
  
```
$mmcode(r2)
```
  
<div class="mmresult r2">
<style>
.a07172_c1
{
  width:20em;
  height:10em;
  background-image: 
    repeating-linear-gradient(0deg, 
      #00000088,#00000055 1em, 
      transparent 1em,transparent 3em)
    ,repeating-linear-gradient(90deg, 
      #00000088,#00000055 1em, 
      transparent 1em,transparent 3em)
    ,repeating-radial-gradient(
      #f00, #ff0 10%, #0f0 15%,#f00 20%);
  background-position:0em 0em,0em 0em,10em 1em;
  background-size:auto auto,auto auto,5em 5em;
  background-repeat:no-repeat;
}
</style>

<div class="a07172_c1">
</div>
</div>
  
repeating-linear-gradient 很好玩的地方就是, 他自帶 repeat 功能，可以很容易實現尺規的繪製

```
$mmcode(r3)
```
  
<div class="mmresult r3">
<style>
.a07173_c1
{
  width:6.1em;
  height:1em;
  background: 
    repeating-linear-gradient(90deg, #000,#000 0.1em,#0000 0.1em,#0000 1em) 0em 0em,
    repeating-linear-gradient(90deg, #000,#000 0.05em,#0000 0.05em,#0000 1em) 0.525em 0.5em/auto 1em,
    repeating-linear-gradient(90deg, #000,#000 0.02em,#0000 0.02em,#0000 0.1em) 0.04em 0.7em/auto 1em
    ;
  background-repeat:no-repeat;
  font-size:3em;
}
</style>

repeating-radial-gradient 可以用來畫圓，加上 ::before 及 ::after 用邊框來畫三角形，就可以畫出之前靠邊框做不到的箭頭  
  
```
$mmcode(r4)
```
  
<div class="mmresult r4">
<style>
.a07174_c1
{
  width:10em;
  height:10em;
  background: 
    repeating-linear-gradient(0deg, #0000,#0000 40%,#fff 40%,#fff 60%) 0em 0em,
    repeating-radial-gradient(#0000, #0000 40%, #0bb 0%, #0bb 60%) 0em 0em;
  background-repeat:no-repeat;
  background-color:#fff;
  position:relative;
  border-radius:100em;
  animation:a07174_a1 3s 0s linear infinite;
}
.a07174_c1::before
{
  content:"";
  position:absolute;
  width:0;
  height:0;
  border:#000 solid 1.3em;
  border-color:#0000 #0bb #0bb #0000;
  left:68%;
  top:20%;
  transform:rotate(30deg);
}
.a07174_c1::after
{
  content:"";
  position:absolute;
  width:0;
  height:0;
  border:#000 solid 1.3em;
  border-color:#0bb #0000 #0000 #0bb;
  left:6%;
  top:53%;
  transform:rotate(30deg);
}
@keyframes a07174_a1
{
  100%
  {
    transform:rotate(360deg);
  }
}
</style>

<div class="a07174_c1">
</div>
</div>
  
repeating-radial-gradient 的詳細說明

參考網址：https://www.runoob.com/cssref/func-repeating-radial-gradient.html
  
repeating-radial-gradient(shape size at position, start-color, ..., last-color);

shape : ellipse (預設), circle <br>
size  : farthest-corner (預設), closest-side, closest-corner, farthest-side
  
可以利用這個來晝半圓
  
```
$mmcode(r5)
```
  
<div class="mmresult r5">
<style>
.a07175_c1
{
  width:10em;
  height:10em;
  background: 
/*
    完整寫法 :
    repeating-radial-gradient(ellipse farthest-corner at 50% 100%
*/      
    repeating-radial-gradient(at 50% 100%
      , #0000
      , #0000 40%
      , #a0f  40%
      , #0ff  48%
      , #0f0  50%
      , #ff0  52%
      , #f00  60%
    ) 0em 0em/10em 5em;
  background-repeat:no-repeat;
  background-color:#9ff;
}
</style>

<div class="a07175_c1">
</div>
</div>
  
-----------------------------------------------------

# background-attachment

scroll - 預設, 就是像牆壁的背景，不會跟著捲動而移動<br>
local  - 背景圖片會隨著捲動而移動<br>
fixed  - 背景圖片的位置是固定在螢幕上的，不會隨著 div 移動而移動<br>

**<font color="#ff0000">在 iPhone 上似忽只有 scroll 其它的不支援</font>**

<div class="a07176_c1">
background-attachment<br><br>
<label>
<input type="radio" name="a07176_s1" checked> <span>scroll,scroll</span>
</label><br>
<label>
<input type="radio" name="a07176_s1"> <span>local,local</span>
</label><br>
<label>
<input type="radio" name="a07176_s1"> <span>scroll,local</span>
</label><br>
<label>
<input type="radio" name="a07176_s1"> <span>local,scroll</span>
</label><br>
</div>

<div class="a07176_c2">
<div>
This is a background test.<br>
This is a background test.<br>
This is a background test.<br>
 <div class="a07176_c3">fixed</div><br>
This is a background test.<br>
 <div class="a07176_c4">scroll/local</div><br>
This is a background test.<br>
This is a background test.<br>
This is a background test.<br>
This is a background test.<br>
This is a background test.<br>
</div>
</div>

var k=document.querySelector(".a07176_c2");
  var kn=3;
  setInterval(function()
  {
    let k1=k.scrollTop;
    k.scrollTop+=kn;
    if (k1==k.scrollTop) kn=-3;
    if (k.scrollTop>=k.scrollTopMax-3) kn=-3;
    if (k.scrollTop<=0) kn=3;
  },30);
})();
</script>  
  
-----------------------------------------------------

# background-clip

背景的裁切，最好玩的地方是可以用文字裁切，可以做文字的特效

**<font color="#ff0000">在 iPhone 和 Mac 的 safari 對於 text 的支援有點不一樣</font>**  
  
<style>
.a07177_c1
{
  display:inline-block;
  width:40%;
  vertical-align:top;
  font-size:1.5em;
}
.a07177_c1 label
{
  display:inline-block;
  border:1px solid #000;
  width:8em;
  padding:0.2em;
  margin:0.1em;
}
.a07177_c2
{
  display:inline-block;
  width:calc(59% - 2em);
  height:4em;
  background:
    url(https://yiharng.github.io/bird.jpg) 0 0/100%;
  background-repeat:repeat;
  color:#ff0;
  font-size:3em;  
  font-weight:900;
  line-height:1em;
  overflow:auto;
  text-align:center;
  border:0.5em dashed #f00;
  padding:0.5em;
/*
  color: transparent;
  -webkit-background-clip: text;
*/  
  font-family:Impact, Charcoal, sans-serif;
}
</style>

<div class="a07177_c1">
background-clip<br>
<label>
<input type="radio" name="a07177_s1" checked> <span>border-box</span>
</label><br>
<label>
<input type="radio" name="a07177_s1"> <span>padding-box</span>
</label><br>
<label>
<input type="radio" name="a07177_s1"> <span>content-box</span>
</label><br>
<label>
<input type="radio" name="a07177_s1"> <span>text</span>
</label><br>
</div>

<div class="a07177_c2"><br>
This is a background test.
</div>

$(".a07177_c2").css("background-clip",c);
    $(".a07177_c2").css("-webkit-background-clip",c);

if (c=="text")
    {
      $(".a07177_c2").css("color","transparent");
    }
    else
    {
      $(".a07177_c2").css("color","#ff0");
    }
  });

})();
</script>
  
-----------------------------------------------------

網頁上要秀一張圖，第一個想到的是 <img src=xxx> 這個方式，後來才發現有個更好用的，叫做 background-image , 雖然知道有些特別的用法，卻一直沒有去深入瞭解, 所以在這做個小筆記!


<style>
/*
   background 可以設定很多張圖片，只需用逗號分隔, 
   上下層是由上而下，第一個圖片會在最上方
*/
.a07171_aa
{
  width:20em;
  height:10em;
  background-color: #ff0;
  background-image: url(https://yiharng.github.io/bomb.png)
                   ,url(https://yiharng.github.io/bird.jpg);
  background-position: 0em 0em,2em 0em;
  background-size: 5em 5em,16em 10em;
  background-repeat: repeat, no-repeat;
}
/*
   可以用下面這個方式合併來寫
*/
.a07171_bb
{
  width:20em;
  height:10em;
  background:url(https://yiharng.github.io/bomb.png) 0em 0em/5em 5em repeat
      , #ff0 url(https://yiharng.github.io/bird.jpg) 2em 0em/16em 10em no-repeat;

  /*
      注意那個 #ff0 背景顏色設定，必須在最後一個才能設定
  */
}
</style>

<div class="a07171_aa">
</div>
<br>
<div class="a07171_bb">
</div>

背景圖片不一定要用圖片，也可以用 repeating-linear-gradient 和 repeating-radial-gradient 來產生線性漸層或圓形漸層的背景, 如果再控制好大小和座標，基本上可以用來畫圖了


<style>
.a07172_c1
{
  width:20em;
  height:10em;
  background-image: 
    repeating-linear-gradient(0deg, 
      #00000088,#00000055 1em, 
      transparent 1em,transparent 3em)
    ,repeating-linear-gradient(90deg, 
      #00000088,#00000055 1em, 
      transparent 1em,transparent 3em)
    ,repeating-radial-gradient(
      #f00, #ff0 10%, #0f0 15%,#f00 20%);
  background-position:0em 0em,0em 0em,10em 1em;
  background-size:auto auto,auto auto,5em 5em;
  background-repeat:no-repeat;
}
</style>

<div class="a07172_c1">
</div>

repeating-linear-gradient 很好玩的地方就是, 他自帶 repeat 功能，可以很容易實現尺規的繪製


<style>
.a07173_c1
{
  width:6.1em;
  height:1em;
  background: 
    repeating-linear-gradient(90deg, #000,#000 0.1em,#0000 0.1em,#0000 1em) 0em 0em,
    repeating-linear-gradient(90deg, #000,#000 0.05em,#0000 0.05em,#0000 1em) 0.525em 0.5em/auto 1em,
    repeating-linear-gradient(90deg, #000,#000 0.02em,#0000 0.02em,#0000 0.1em) 0.04em 0.7em/auto 1em
    ;
  background-repeat:no-repeat;
  font-size:3em;
}
</style>

<div class="a07173_c1">
</div>

repeating-radial-gradient 可以用來畫圓，加上 ::before 及 ::after 用邊框來畫三角形，就可以畫出之前靠邊框做不到的箭頭


<style>
.a07174_c1
{
  width:10em;
  height:10em;
  background: 
    repeating-linear-gradient(0deg, #0000,#0000 40%,#fff 40%,#fff 60%) 0em 0em,
    repeating-radial-gradient(#0000, #0000 40%, #0bb 0%, #0bb 60%) 0em 0em;
  background-repeat:no-repeat;
  background-color:#fff;
  position:relative;
  border-radius:100em;
  animation:a07174_a1 3s 0s linear infinite;
}
.a07174_c1::before
{
  content:"";
  position:absolute;
  width:0;
  height:0;
  border:#000 solid 1.3em;
  border-color:#0000 #0bb #0bb #0000;
  left:68%;
  top:20%;
  transform:rotate(30deg);
}
.a07174_c1::after
{
  content:"";
  position:absolute;
  width:0;
  height:0;
  border:#000 solid 1.3em;
  border-color:#0bb #0000 #0000 #0bb;
  left:6%;
  top:53%;
  transform:rotate(30deg);
}
@keyframes a07174_a1
{
  100%
  {
    transform:rotate(360deg);
  }
}
</style>

<div class="a07174_c1">
</div>

repeating-radial-gradient 的詳細說明

參考網址：https://www.runoob.com/cssref/func-repeating-radial-gradient.html

repeating-radial-gradient(shape size at position, start-color, ..., last-color);

shape : ellipse (預設), circle
size : farthest-corner (預設), closest-side, closest-corner, farthest-side

可以利用這個來晝半圓


<style>
.a07175_c1
{
  width:10em;
  height:10em;
  background: 
/*
    完整寫法 :
    repeating-radial-gradient(ellipse farthest-corner at 50% 100%
*/      
    repeating-radial-gradient(at 50% 100%
      , #0000
      , #0000 40%
      , #a0f  40%
      , #0ff  48%
      , #0f0  50%
      , #ff0  52%
      , #f00  60%
    ) 0em 0em/10em 5em;
  background-repeat:no-repeat;
  background-color:#9ff;
}
</style>

<div class="a07175_c1">
</div>

background-attachment

scroll - 預設, 就是像牆壁的背景，不會跟著捲動而移動
local - 背景圖片會隨著捲動而移動
fixed - 背景圖片的位置是固定在螢幕上的，不會隨著 div 移動而移動

在 iPhone 上似忽只有 scroll 其它的不支援

background-attachment

scroll,scroll
local,local
scroll,local
local,scroll

This is a background test.
This is a background test.
This is a background test.

fixed

This is a background test.

scroll/local

This is a background test.
This is a background test.
This is a background test.
This is a background test.
This is a background test.

background-clip

背景的裁切，最好玩的地方是可以用文字裁切，可以做文字的特效

在 iPhone 和 Mac 的 safari 對於 text 的支援有點不一樣

background-clip
border-box
padding-box
content-box
text

This is a background test.

TP Notes

Translate

2020年7月17日星期五

background

background-attachment

background-clip

沒有留言:

張貼留言

Translate

2020年7月17日 星期五

background

background-attachment

background-clip

沒有留言:

張貼留言

2020年7月17日星期五