mirror of
https://github.com/niklasvh/html2canvas.git
synced 2023-08-10 21:13:10 +03:00
42 lines
2.3 KiB
HTML
42 lines
2.3 KiB
HTML
|
<!doctype html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Background attribute tests</title>
|
||
|
|
<script type="text/javascript" src="../../test.js"></script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
background-color: blanchedalmond;
|
||
|
|
}
|
||
|
|
|
||
|
|
div {
|
||
|
|
display: inline-block;
|
||
|
|
width: 100px;
|
||
|
|
height: 100px;
|
||
|
|
padding: 10px;
|
||
|
|
border: 15px solid black;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div style="background: -webkit-linear-gradient(90deg, blue, red);"></div>
|
||
|
|
<div style="background: linear-gradient(90deg, blue, red);"></div>
|
||
|
|
<div style="background: linear-gradient(45deg, blue, red);"></div>
|
||
|
|
<div style="background: linear-gradient(45deg, blue, red); width:200px;"></div>
|
||
|
|
<div style="background-image: linear-gradient(45deg, blue, red); background-position: 20px 30px; background-size: 60px; background-repeat: no-repeat"></div>
|
||
|
|
<div style="background-image: linear-gradient(45deg, blue, red); background-position: 20px 30px; background-size: 60px;"></div>
|
||
|
|
<div style="background-image: linear-gradient(45deg, blue, red);padding:0"></div>
|
||
|
|
<div style="background: linear-gradient(red, red 60%, blue);"></div>
|
||
|
|
<div style="background: linear-gradient(90deg, red 60%, blue);"></div>
|
||
|
|
<div style="background: linear-gradient(135deg, red, red 60%, blue);"></div>
|
||
|
|
<div style="background: linear-gradient(to right, red, red 60%, blue);"></div>
|
||
|
|
<div style="background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);"></div>
|
||
|
|
<div style="background: linear-gradient(60deg, yellow 0%, orange 10%, red 50%, blue 90%, cyan 100%);"></div>
|
||
|
|
<div style="background: linear-gradient(45deg, yellow 0%, orange 10%, red 50%, blue 90%, cyan 100%); background-origin: content-box"></div>
|
||
|
|
<div style="background: linear-gradient(90deg, yellow 0%, orange 10%, red 50%, blue 90%, cyan 100%); background-origin: padding-box"></div>
|
||
|
|
<div style="background: linear-gradient(90deg, yellow 0%, orange 10%, red 50%, blue 90%, cyan 100%); background-origin: border-box"></div>
|
||
|
|
<div style="background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); "></div>
|
||
|
|
<div style="background: linear-gradient(90deg, yellow 0%, orange 10%, red 50%, blue 90%, cyan 100%) content-box;"></div>
|
||
|
|
<div style="background: linear-gradient(60deg, hsla(120,80%,50%,0.8) 0%, transparent 50%, rgba(255,100,100,0.5) 100%);"></div>
|
||
|
|
</body>
|
||
|
|
</html>
|