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
|
Override `!default_background_origin` to change the default.
|
||||||
|
|
||||||
* Possible values: [padding-box | border-box | content-box]
|
|
||||||
* browser defaults to padding-box, mixin defaults to content-box
|
|
||||||
|
|
||||||
Override constants to change defaults.
|
|
||||||
|
|
||||||
!default_background_origin ||= "content-box"
|
!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)
|
=background-origin(!origin = !default_background_origin)
|
||||||
// webkit and mozilla use the deprecated short [border | padding | content]
|
// webkit and mozilla use the deprecated short [border | padding | content]
|
||||||
!deprecated= "padding"
|
!deprecated= "padding"
|
||||||
|
Loading…
Reference in New Issue
Block a user