An example for background origin.
This commit is contained in:
parent
e65516f99e
commit
d4e90d79aa
@ -0,0 +1,8 @@
|
||||
---
|
||||
title: Background Origin
|
||||
description: See background origin in action.
|
||||
framework: compass
|
||||
stylesheet: compass/css3/_background_origin.sass
|
||||
example: true
|
||||
---
|
||||
= render "partials/example"
|
Binary file not shown.
After Width: | Height: | Size: 3.2 KiB |
@ -0,0 +1,7 @@
|
||||
.example
|
||||
#padding-box(style="background-image: url(background/);")
|
||||
Padding Box
|
||||
#border-box(style="background-image: url(background/);")
|
||||
Border Box
|
||||
#content-box(style="background-image: url(background/);")
|
||||
Content Box
|
@ -0,0 +1,20 @@
|
||||
@import compass/css3
|
||||
|
||||
.example
|
||||
padding: 2em
|
||||
div
|
||||
background:
|
||||
repeat: repeat
|
||||
position: top left
|
||||
border: 10px solid rgba(255, 0, 0, 0.5)
|
||||
color: white
|
||||
+text-shadow(darken(#00f, 50%), 2px, 2px)
|
||||
padding: 1em
|
||||
text-align: center
|
||||
margin-bottom: 2em
|
||||
#padding-box
|
||||
+background-origin("padding-box")
|
||||
#border-box
|
||||
+background-origin("border-box")
|
||||
#content-box
|
||||
+background-origin("content-box")
|
@ -1,13 +1,17 @@
|
||||
//
|
||||
Position the background off the edge of the padding, border or content
|
||||
|
||||
* Possible values: [padding-box | border-box | content-box]
|
||||
* browser defaults to padding-box, mixin defaults to content-box
|
||||
|
||||
Override constants to change defaults.
|
||||
Override `!default_background_origin` to change the default.
|
||||
|
||||
!default_background_origin ||= "content-box"
|
||||
|
||||
//
|
||||
Position the background off the edge of the padding, border or content
|
||||
|
||||
* Possible values:
|
||||
* `"padding-box"`
|
||||
* `"border-box"`
|
||||
* `"content-box"`
|
||||
* browser defaults to `"padding-box"`
|
||||
* mixin defaults to `"content-box"`
|
||||
=background-origin(!origin = !default_background_origin)
|
||||
// webkit and mozilla use the deprecated short [border | padding | content]
|
||||
!deprecated= "padding"
|
||||
|
Loading…
Reference in New Issue
Block a user