css-gradients

3熱度

2回答

我遇到了Safari 10和CSS邊框圖像漸變的問題。它適用於所有其他瀏覽器，甚至在Safari 9中。它甚至可以在Safari 10在線模擬器中顯示。請參閱下圖：（我想這是IE 11，而不是IE 10.感謝您的指正！）我以爲這只是我的CSS所以我真的simplfied它，並提出了小提琴。你可以在https://jsfiddle.net/tgbuxkee/ 上看到它也在下面生成。 div {

5熱度

1回答

每次用戶刷新時，如何設置不同的漸變作爲背景？

我工作的一個基於網頁的引導，在我的CSS文件，我有以下代碼： body { height: 100%; background: #3a7bd5; /* fallback for old browsers */ background: -webkit-linear-gradient(to left, #3a7bd5 , #3a6073); /* Chrome 10-25

2熱度

2回答

三角形的邊框圖像漸變圖案

我想用css創建一個奇形的三角形。我的第一個想法是使用透明邊框與transform: rotate，它的工作（見左三角）。現在我想使用漸變邊框圖像作爲同一個三角形的背景，但我無法使其工作。我嘗試了很多東西，如更換border-width，使用包裝和overflow:hidden等，沒有任何工作。在這裏，我發佈了其中一個嘗試（請參閱右側形狀），因爲您看到該模式佔用了所有空間，而不是遵循三角形形狀。有

2熱度

2回答

CSS循環漸變過渡

我得到了一個問題，我想創建一個CSS循環漸變動畫，但是當我這樣做動畫是非常靜態它不動畫順利下面是我目前正在努力的一個例子。希望你能幫助我。 .slider1 { background: background: linear-gradient(rgba(173, 136, 255, 0.44), rgb(109, 0, 255)) !important; } /* c

1熱度

2回答

漸變疊加與CSS

我想使用此代碼 background: url('../img/newspaper.jpeg'),linear-gradient(to bottom right,#002f4b, #dc4225); background-size: cover; 我得到的圖像，但沒有被應用漸變把一個梯度的背景圖像上的一行圖像

8熱度

2回答

瀏覽器移動的線性漸變和url-image？

我想有一個圖像作爲背景，並且也是CSS線性梯度： background-image: url("/site/grigliatrasparente.png"), linear-gradient(left, #404040 0%, #dfbb80 2%,#dfbb80 98%,#404040 100%); 我dont'have與桌面瀏覽器（Firefox 44.x; IE 10;鉻; Safari

1熱度

2回答

更改徑向漸變的中心點在CSS

我需要讓多個梯度象下面這樣：現在看到的灰/白漸變不同的中心，在某些情況下，來自中心，一些從左中心，一些從中下。我用THIS，工具生成以下梯度： background: #f9f9f9; background: -moz-radial-gradient(center, ellipse cover, #f9f9f9 0%, #e1e4e8 62%, #d1d6db 100%); backgro

0熱度

2回答

border-left-image和border-right-image與邊框顏色混合的CSS邊框圖像漸變

是#9b9c9d和border-bottom-color是#f6f9fc。梯度爲，意圖爲以將頂部顏色轉換爲border-left和border-right上的底部顏色。如何混合border-left-image和border-right-image與和border-bottom-color？ HTML <a class="button-style">Evil Whales</a> CSS .

3熱度

3回答

是否可以彎曲線性漸變CSS？

我想通過CSS創建這個「旋風」。 http://imgur.com/a/wOyvk（無梯度）我試圖與徑向漸變這樣做，但是，我不能得到漸變爲「關閉」突然，隨着坡度接近中心。最好的辦法是以某種方式彎曲班輪梯度？這就是我到目前爲止，我不想讓藍色在角落裏，我只是想要一個「切片」的梯度沿着圖像。 https://jsfiddle.net/uh882Lcw/ HTML <div class="banner

5熱度

3回答

背景像素化

我正在尋找像這樣的背景效果（在純CSS中），我該如何做到這一點？（縮放圖像）代碼： html, body { height:100%; background-color:#3D3D3D; display:flex; } div { height: 100px; width:100px;