| 1234567891011121314151617181920212223242526272829303132333435363738 |
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Background clip example</title>
- <style>
- body {
- padding: 2em;
- margin: 0;
- font-family: "Helvetica Neue", Arial, sans-serif;
- background-color: #fff;
- }
- /* this default box is the same as background-clip: border-box; */
- .profile-box {
- display: inline-block;
- height: 200px;
- width: 400px;
- background-position: 50% 50%;
- background-repeat: no-repeat;
- background-image: url(img/cat.jpg);
- border: 10px solid rgba(220, 220, 160, 0.5);
- padding: 10px;
- }
- .padding-box-clipped {
- background-clip: padding-box;
- }
- .content-box-clipped {
- background-clip: content-box;
- }
- </style>
- </head>
- <body>
- <div class="profile-box"></div>
- <div class="profile-box padding-box-clipped"></div>
- <div class="profile-box content-box-clipped"></div>
- </body>
- </html>
|
