background-clip в CSS


Содержание

background-clip

�������� CSS background-clip ������������ ��� �������� ������� ��������, ������� ����� ������ ������� ������.

��� ��������

�����������: �� ���� ���������.

��������

��������� �������� background-clip �������� ���� �� �������� ����.

  • border-box � ������� ������ ������������ ��� �� �������� ���� ����� ��������.
  • padding-box � ����� ������������� ��� �� ����������� ���� �����.
  • content-box � ����� ������������ ������ ���������� ��������, �� ������� ���������� ������� � �����, ���� ��� ������������.

���������� ������: �� ����������.

�������� �� ���������: border-box.

���������

������ CSS: ������������� background-clip

���������. ������������� �������� CSS background-clip.

������ CSS

������: CSS 1 CSS 2 CSS 2.1 CSS 3
���������: ��� ��� ��� ��

��������

�������: Internet Explorer Google Chrome Mozilla Firefox Opera Safari
������: �� 9.0 9.0 � ���� �� 4.0 4.0-9.0 10.0 � ���� �� 4.0 4.0 � ���� �� 10.5 10.5 11.0 � ���� �� 5.0 5.0 � ����
���������: ��� �� ��� �������� �� ��� �� ��� �������� �� ��� ��������

��� �������� background-clip: padding-box Opera 10.5 �� ������������ ����� ��������, Google Chrome 4.0-9.0 � � Safari 5.0 � ���� �� �������� �������� content-box.


���������� background-clip ��� ������ � ��������� css

vladimir ��, 02/13/2013 — 13:09 CSS3

� ������� �� ���������� ������ ����� polygon.com � ���������� �� �� ������� background-clip � background: linear-gradient(�) . �� ����� ����������� ��������� JS ��� ����������� ��������� �� ������������ background-clip: text.

��� ����� background-clip

Background-clip ��� ��������, ������� ������� ���� ������� ���������� ��������� �webkit � 2008 ����, ��������� ��������� ������� ����������� �� �������� � �������� �� ������� ������ ����� ��������:

����� ������������ ��������� ���:

�������� � background-clip

�� �����������, ��� ������ ���������� �������������� css ����������. �������� � �������������� ����� ������� ���, ���� �������� �� �������������� �� �� ������ ������� ��� ��������. � ���������, background-clip � ��������� �������� �� webkit �������� ��������:

��� ��� �������� ��� � firefox (������� �������� ������� �� placekitten) . ����� ���������� �� ��������! ����������, ��� � ��������� ��������� �������� ����������������.

������� �������� � ���������� background-clip

�������� ����� ������������ �������� �������� ���������� Modernizr. �� ��������� ���������� �������� background-clip: text, � ����� ��������� ��������� ����� backgroundcliptext. Polygon.com ��� � ������.

������� �������� � background-clip � ������� css

����� �� ���, � �������� �������, ��� ���� ������������ �webkit ������� � ������� �������� background, �� �������� background-clip: text � ��������� �webkit �� ����� �������� � ��������� �������� �� webkit! ������:

���! �� ����� � ����! Background ������ �� ���������� � ��������� �������� �� webkit:

��������� ����� � ��������� Opera, ������� ���������� ������� �webkit ��� ������ �������������. �� ��� ����� �������� ����������� �������� �o-:

��! �������, ��� ����� � ��� ��-�������� �� �����, ��� ��� ���������� ���������� ���� ������. ������� ��� ��������:

������ ���� �������� ����� � � webkit ������� �������� �� �����.

text-fill-color �������� �� ������


�������� text-fill-color ���� ������������ ��� � 2006 ����. ��� ��������� ����� ������, ��� ������� ������������� ������ � text-stroke. ��������� ����� ����� ��, ��� � � color, �� � ����� ������ ���������������� ��� ����� ������ �� �������� �webkir. ���!

��� ��� �������� ��������� � ������ ���������:

����� �������, ����� �������� ��� �������� Modernizr, ����������� ������������� ����� ��� ��������. � ��������� ����� ������ Opera ������� ������ �������� background � ������� �������� �o-. ���� �� � ������� �������� ���������� � ��������� �������� ������ ������������ ������� �webkit, ����� �������� ������ �������� �����: -moz-linear-gradient� ���� � ����������, ��� ����� ���������� �����-����.

�������� CSS3 background-origin � background-clip

�������� background-origin � background-clip ���� ��������� � CSS3 ��� �������������� ����������� ��� ���������� ����. �� ������ ������ ������� ����� ����� ���������� ����� ���� �� ����� �������, �� � ������ ����� �� ��������, ��� ��� ����������, � ����� ������� �� ��������.

Background-origin: ���������������� �������� �������

���� �������� background-position ������������� ��� �������� ��������� ������� �������� ������� �� ����, �� background-origin ��������� ��� �������� ������������ ����� (border), ������� (padding) ��� ����������� ��������. �� ��������� ������� ������� ������������, ������������ �� ������� �������� (���� ��� ����), � �� �������������� ��� �����. ��� ��������� ����� ������, ��������� ��������� �������� background-origin:

  • padding-box (�������� �� ���������) � ������� ����������� ������������� � ������� ����� ���� ��������, ������� �������� �������� �������� padding.
  • border-box � ������� ����������� ������������� � ������� ����� ���� ��������, ������� �������� �������� ����� (��� ���� ����� ������������� �� ���, ���������� ��� �����).
  • content-box � ������� ����������� ������������� � ������� ����� ����, ������� ����������� ����������� ��������.
Илон Маск рекомендует:  Шаблон сайта о животных HTML, CSS, 8 страниц

������� ��, ��������� background-origin ����� ����� ����� ������ ��� �������, ��� � �������� ���� ����� �/��� �������. ���� �� ������ ����������, ��� �������� ������ �������� ������� ��������. ��� ������� �� ������� ����

� ����� ������� ���������� �������� ������� ���������. ��� �����, ���� �������� ���? �������� ������:

��� �����, ������� ������� �����������, �� ��������� ����� ���������� � ����������� �� �������� background-origin. ���� ������� ����� ���������, �� ������� background-origin ����� ���� ����������� ����������:

� ��� ���� �����������: ��������, �� ��������, ��� � ������ �����

Background-clip: �������� ��� ������� ����

�������� background-clip ��������� ����������, ����� ������� �������� ��� ���������, � ����� � ���. �������� ������������, �������� ��������� ��������� ��������:

  • padding-box � ��� ��������� �������, ������� ��� �������, � �� ��������� ������� ������, ��� ��� � ��������� ���������� ��� �������� ����� ��� �� ����� �����.
  • border-box (�������� �� ���������) � ��� ��������� �������, ������� ������� ����� (��� ���� ����� ������������� ������ ����). � ������ � ������� �������� ������ ������� �������� ����� ������� ������ ��� �������, ��� �� �����������.
  • content-box � ��� ��������� �������, ������� ��� ����������, � �� ��������� ������� �������� � ������.


������� ��� ���������������� �������� �������:

������� ��� �������������� �������� �������:

��������, ��� background-clip �� ������ ��������� ����� ���������������� ����, ������� ������� � ����� ������� �������� ������� ����� ����������, ���� ���������������� � ���� �������� �� ��������� (��� ����� �� ������� � background-clip:content-box ).

��������� ����� �������

��������� background-origin � background-clip � ����, ����� ��������� �������� ������� �������� �������, � ������� �� ������ ��� ��������. ��������, ��������� ��� �������� ����� �������

��������� ����������

Internet Explorer ������������ �������� background-origin � background-clip, ������� � 9-� ������. � ����������� ������������ ��������� ������ �������� ����� ��������.

��� �, ��� �� � ������������� � ��� ����� ����������� ����������, ������� �������� ����������� ���. �� CSS �� ��������� ��������: ������� ��� ���� ��� ���� �������� ��� ������� �����������, �������, ������, ������������ ����������� � background-size.

background-clip

Easily manage projects with monday.com

background-clip lets you control how far a background image or color extends beyond an element’s padding or content.

Values

  • border-box is the default value. This allows the background to extend all the way to the outside edge of the element’s border.
  • padding-box clips the background at the outside edge of the element’s padding and does not let it extend into the border.
  • content-box clips the background at the edge of the content box.
  • inherit applies the background-clip setting of the parent to the selected element.


Demos

background-clip is best explained in action, so we’ve put together two demos to show how it works.

In the first demo, each div has one paragraph inside it. The paragraph is the div’s content. Each div has a yellow background and a 5 pixel, semi-transparent light blue border.

By default, or with background-clip: border-box set, the yellow background extends all the way to the outside edge of the border. Notice how the border looks like it’s green because of the yellow background beneath it.

When the background-clip is changed to padding-box , the background color stops where the element’s padding ends. Notice that the border is blue because the background isn’t allowed to bleed into the border.

With background-clip: content-box , the background color only applies itself to the div’s content, in this case the single paragraph element. The div’s padding and border don’t have a background color. But, there’s one little detail worth mentioning: the color does extend into the content’s margin. Check out the differences between the first and second examples with content-box .

In the first content-box example, the browser’s default margins are applied to the paragraph, and the background clips after the margin. In the second example, the margin is set to 0 in the CSS, and the background is clipped at the edge of the text.

This next interactive shows background-clip with a background image. The content in this demo is a smaller empty div.

This demo also applies background-size: cover and background-repeat: no-repeat in addition to background-clip to control the background image, which would otherwise repeat until clipping.

Илон Маск рекомендует:  Что такое код swfshape >setline

There is a vendor-prefixed version of this that works for clipping a background to text. In order to see that work, the text will also need to be transparent. Fortunately, there is another vendor-prefixed text color property that can effectively override color , making it safe to use as it can have a fallback:

����� � CSS3: background-clip: text

���� ���������� ������ � ��������� � ����������, WebKit ���������� ����� :) �� ���� ������ ������������ CSS3 ����������� ����� ��������, ��������� background-clip:text , ������� ��������� �������� ����� ���/����������� �� �����, ������� � ���� ����, ��� ���� �� ���������� ��, � �������� ����� ������� �� ������� ��������� ������ � Photoshop.

��� �������� ���:

����������, �������� ��? :) ���������, ����� ������������ Safari � FireFox ������ ��������� ��� ��������.

��� ��������� ���������� ���������� ������ �������� ����� ���������� �����:
� ����� � �����
— ����� � ��������
� ����� � ���������������

������ ������

������� ����������


  • 7 ������ 2020 � 12:05

����������� �� alt-text �� ������������� ���-������������

Andro > +10 16,6k 54 9

������ FPS ��� ��������� ��������. ������� �������� background-attachment: fixed

AdBlock ������� ���� ������, �� ������� �� ���� � ��������

����������� 41

����� �� �����. ����� �� ������� �����������. � ����� � ���� ����������� �����. �� ������, �������� ����� � ���������� �����. ������ ���������� ����� (SVG ��� ����) ���� �����! � �� ���� ���������/���������, ��������� ���������� �����, ������������ �� � �.�.

CSS2 ���� �� �������, ��� ��� ���������� ������! ��� �� ������������, � ����� ����, ����� ��� ���� ��������. ������ ��� ������� �� � ���������� ����������, � � ������ ���.

���������, ����� ������������ Safari � FireFox ������ ��������� ��� ��������.

��� �������: �� ����� ���� ���� ������ ��� ������ ����� �������� ����� GreaseMonkey � ��� �������� :)

��� ��� ������������ — ���� �����. ������ ����� ��������� �� ������� :-/

>>���������, ����� ������������ Safari � FireFox ������ ��������� ��� ��������.

��������, ������� � css �������� ��� -webkit-background-clip � �������� � ������� gecko?

� �� ���� ���� ���, �� ��� ������� ������ «��� ����» — ������� �������.
������ ��� �� ����� ������ ��������������� ����������� � W3C?
������ ����� ��������� �� ����� ������?

�� � ������ ��������!

������ 1:
��� ���������� ����� �������� � ����� ��������, ��������� ����� ��� ��������, � ��� ��� ������� ? ������. ��� �� ��� ����������? � ���� ������� ����� ���� �� ����, ���� �����, �� �� ������!


������ 2:
��������� ��� �������������, � ����� ����� ������� background ���� �������� �� ��������� ����-�� �� ��?

����, �� ��� �� ������ �����������, ��� ������� ����������� �������� background-clip.

background-clip

The background-clip property specifies the area within which the background is painted.

An element in CSS has 3 areas, called boxes, defined inside it: the border box, the padding box, and the content box.
There�s also a fourth area called the margin box which includes the element and its outer margin.

Box areas of an element.

The background of an element is usually painted across and within the entire border box area. This results in the fact that the background is drawn beneath the border of an element. This is the default behavior in CSS.

The background-clip property can be used to clip the background to one of the three box areas inside an element. When one box area is specified in the property, the background is clipped to the area of the specified box and will not extend beyond that area.

The background-clip property can also take comma-separated values so that when the element has more than one background image, each value is applied to a corresponding background image (first value for the first image, second value for the second image, and so on). See the examples below.

Official Syntax

  • Syntax:
  • Initial: border-box
  • Applies To: all elements
  • Animatable: no

  • Values

    Notes

    Note that the background is always drawn behind the border, if any.

    The root element ( html ) has a different background painting area, and thus the background-clip property has no effect when specified on it.

    Examples

    These are all valid background-clip declarations:

    The following example draws the first background image all within the content box and the second background image within the border box;

    Live Demo

    This is a live demo of the background-clip property:

    Browser Support

    CSS3 Background-image options

    New properties to affect background images, including background-clip, background-origin and background-size

    background-clip

    ��������

    �������� CSS background-clip ���������� ��� ����� ������������ ��� �������� ������������ ��� ������. ������ ������ ������� ���� ������� �������� ����� ���������� ������� � ��� �������� ������ ������� � ������� �������� padding.

    Илон Маск рекомендует:  Тег main
    background-clip
    ��������: border-box | padding-box | content-box
    ��������� ��������: border-box
    ������� ����������: ��� ��������
    ������������: ���
    ��������� ���������� Internet Explorer 9+, Chrome 1+, Opera 10.5+, Safari 3+ (-webkit-background-clip), Firefox 4+, Android +, iOS +
    ������ CSS: CSS3
    ��������� JavaScript object.style.backgroundClip=»padding-box»
    ����������:


    �������� background-clip ������������ ������������ ���� � ��������� ��������� �������� ��� ������� ����. �������� � ���� ������ ������������� ����� �������.

    ���������

    ��������

    �������� background-clip ����� ��������� ��������� ��������:

    border-box ��� ������������ �� ������ padding-box ��� ������������ ��� ��������� content-box ��� ������������ ������ ��� ���������� ��������

    Свойство background-clip

    Обратите внимание: данное свойство поддерживается в IE9+, Chrome, Firefox, Opera и Safari.

    С помощью свойства background-clip Вы можете указать область, которую будет занимать фон внутри элемента.

    Данное свойство может иметь следующие значение:

    • border-box фон будет занимать все пространство внутри элемента включая границы;
    • padding-box фон будет занимать только пространство внутри границ элемента;
    • content-box фон будет занимать только содержимое элемента.

    CSS Background-Clip Property

    CSS Tutorial > Background > Background-clip

    The CSS background-clip property specifies where the background image / background color should be shown. There are three possible values:

    • border-box: the background covers the content area, the padding area, and the border area.
    • padding-box: the background covers the content area and the padding area.
    • content-box: the background covers only the content area.

    The picture below shows where the background would be displayed for each background-clip value. Specifically, background-clip: border-box means that the background is shown inside the purple box, background-clip: padding-box means that the background is shown inside the blue box, and background-clip: content-box means that the background is shown inside the orange box.

    Below we show an example for each possible value.

    Example 1: Background-clip: border-box


    border: solid rgba(128,128,128,0.5) 25px;
    padding: 25px;
    background-color: red;
    background-repeat: no-repeat;
    background-clip: border-box;

    In Example 1, the background color fills the entire element, including the border area. The border area is gray and has been set to be opaque so you can see the presence of the background image in the border area.

    Example 2: Background-clip: padding-box

    border: solid rgba(128,128,128,0.5) 25px;
    padding: 25px;
    background-color: red;
    background-repeat: no-repeat;
    background-clip: padding-box;

    In Example 2, the background color fills only the content area and the padding area.

    Example 3: Background-clip: content-box

    border: solid rgba(128,128,128,0.5) 25px;
    padding: 25px;
    background-color: red;
    background-repeat: no-repeat;
    background-clip: content-box;

    In Example 3, the background color fills only the content area and the content area.

    CSS background-clip

    The background-clip property specifies the area within which background is displayed. A background may be displayed within the content box, the padding box or the border box.

    background-clip property should be used along with background-origin property, where the latter specifies the starting position of the background image, while the former specifies the area where the image is displayed.

    Values

    border-box : Background is displayed within the border box, i.e. it extends to the outer edge of the border. This means that the background will be visible beneath the border if the border is partially transparent. This is the default value.

    padding-box : Background is displayed within the padding box.

    content-box : Background is displayed within the content box.

    initial : Sets the default value of the property.

    inherit : Inherits the value from parent element.

    Example

    In all the three cases, the background image starts from the top left corner of the border box because the background-origin property is set to border-box . The area in which the background image appears depends on the value given to the background-clip property.

    Look at another example.

    This example is given just to show you the difference in the appearance of the background image on giving the value content-box to the background-clip property for different values of the background-origin property.

    Giving different values for different background images

    For giving different clipping values for different background images of an element, different comma-separated values have to be given to the background-clip property.

    The first value (before the first comma) corresponds to the first background image, the second value to the second image, and this goes on for every image. If only one value set is specified, then it will define the clipping behaviour of all the background images.

    The first image ‘star.png’ appears within the content box and the sat econd image ‘leaves.jpg’ appears within the border box, though starting position of both the images is the top left corner of the border box.

    Browser Support

    This property is supported in all modern browsers. Multiple background images are not supported in IE8 and earlier versions.

    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL