HTML | Propiedad de origen de fondo de estilo DOM

Posted on by Rudeus Greyrat

La propiedad Style backgroundOrigin en HTML DOM se usa para determinar la posición relativa de la imagen de fondo. Puede hacerse en relación con el relleno, el borde o el contenido real.

Sintaxis:

  • Devuelve la propiedad backgroundOrigin. 
    object.style.backgroundOrigin
  • Se utiliza para establecer la propiedad backgroundOrigin. 
    object.style.backgroundOrigin = "padding-box|border-box|initial|
content-box|inherit"

Valores de retorno: Devuelve un valor de string, que representa la propiedad de origen de fondo de un elemento.

Valores de propiedad:

  • padding-box: este valor coloca la imagen en relación con el borde de relleno en la parte superior izquierda. Es el valor predeterminado.
  • border-box: este valor coloca la imagen en relación con el borde del borde, que es la parte superior izquierda absoluta.
  • cuadro de contenido: este valor posiciona la imagen en relación con el comienzo del contenido real del elemento.
  • initial: Se utiliza para establecer esta propiedad en su valor predeterminado.
  • heredar: hereda la propiedad de su elemento padre.

padding-box: este valor coloca la imagen en relación con el borde de relleno en la parte superior izquierda. Es el valor predeterminado.

Ejemplo:

<!DOCTYPE html>
<html>
      
<head>
    <title>
        DOM Style backgroundOrigin Property
    </title>
      
    <style>
        .bg-img {
            height: 200px;
            width: 200px;
            padding: 10px;
            border: 10px dotted;
            margin-bottom: 10px;
            background: url(
'https://media.geeksforgeeks.org/wp-content/uploads/20190311222622/sample-image.png')
            no-repeat;
            background-size: 100px;
            background-origin: content-box;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
      
    <b>DOM Style backgroundOrigin Property</b>
      
    <p>
        Click on the button to change the origin 
        property of the background image to padding-box
    </p>
      
    <div class="bg-img">
        GeeksforGeeks contains well written, well
        thought and well explained computer science
        and programming articles, quizzes and
        practice questions.
    </div>
      
    <button onclick="changeOrigin()">
        Change backgroundOrigin
    </button>
  
    <!-- Script to change backgroundOrigin property -->
    <script>
        function changeOrigin() {
            elem = document.querySelector('.bg-img');
            elem.style.backgroundOrigin = 'padding-box';
        }
    </script>
</body>
  
</html>                    

Producción:

  • Antes de hacer clic en el botón:
    padding-before
  • Después de hacer clic en el botón:
    padding-after

border-box: este valor coloca la imagen en relación con el borde del borde, que es la parte superior izquierda absoluta.

Ejemplo:

<!DOCTYPE html>
<html>
      
<head>
    <title>
        DOM Style backgroundOrigin Property
    </title>
      
    <style>
        .bg-img {
            height: 200px;
            width: 200px;
            padding: 10px;
            border: 10px dotted;
            margin-bottom: 10px;
            background: url(
'https://media.geeksforgeeks.org/wp-content/uploads/20190311222622/sample-image.png')
            no-repeat;
            background-size: 100px;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
      
    <b>DOM Style backgroundOrigin Property</b>
      
    <p>
        Click on the button to change the origin 
        property of the background image to padding-box
    </p>
      
    <div class="bg-img">
        GeeksforGeeks contains well written, well
        thought and well explained computer science
        and programming articles, quizzes and
        practice questions.
    </div>
      
    <button onclick="changeOrigin()">
        Change backgroundOrigin
    </button>
  
    <!-- Script to change backgroundOrigin property -->
    <script>
        function changeOrigin() {
            elem = document.querySelector('.bg-img');
            elem.style.backgroundOrigin = 'border-box';
        }
    </script>
</body>
  
</html>                    

Producción:

  • Antes de hacer clic en el botón:
    border-before
  • Después de hacer clic en el botón:
    border-after

cuadro de contenido: este valor posiciona la imagen en relación con el comienzo del contenido real del elemento.

Ejemplo:

<!DOCTYPE html>
<html>
      
<head>
    <title>
        DOM Style backgroundOrigin Property
    </title>
      
    <style>
        .bg-img {
            height: 200px;
            width: 200px;
            padding: 10px;
            border: 10px dotted;
            margin-bottom: 10px;
            background: url(
'https://media.geeksforgeeks.org/wp-content/uploads/20190311222622/sample-image.png')
            no-repeat;
            background-size: 100px;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
      
    <b>DOM Style backgroundOrigin Property</b>
      
    <p>
        Click on the button to change the origin 
        property of the background image to padding-box
    </p>
      
    <div class="bg-img">
        GeeksforGeeks contains well written, well
        thought and well explained computer science
        and programming articles, quizzes and
        practice questions.
    </div>
      
    <button onclick="changeOrigin()">
        Change backgroundOrigin
    </button>
  
    <!-- Script to change backgroundOrigin property -->
    <script>
        function changeOrigin() {
            elem = document.querySelector('.bg-img');
            elem.style.backgroundOrigin = 'content-box';
        }
    </script>
</body>
  
</html>                    

Producción:

  • Antes de hacer clic en el botón:
    content-before
  • Después de hacer clic en el botón:
    content-after

initial: Se utiliza para establecer esta propiedad en su valor predeterminado.

Ejemplo:

<!DOCTYPE html>
<html>
      
<head>
    <title>
        DOM Style backgroundOrigin Property
    </title>
      
    <style>
        .bg-img {
            height: 200px;
            width: 200px;
            padding: 10px;
            border: 10px dotted;
            margin-bottom: 10px;
            background: url(
'https://media.geeksforgeeks.org/wp-content/uploads/20190311222622/sample-image.png')
            no-repeat;
            background-size: 100px;
            background-origin: content-box;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
      
    <b>DOM Style backgroundOrigin Property</b>
      
    <p>
        Click on the button to change the origin 
        property of the background image to padding-box
    </p>
      
    <div class="bg-img">
        GeeksforGeeks contains well written, well
        thought and well explained computer science
        and programming articles, quizzes and
        practice questions.
    </div>
      
    <button onclick="changeOrigin()">
        Change backgroundOrigin
    </button>
  
    <!-- Script to change backgroundOrigin property -->
    <script>
        function changeOrigin() {
            elem = document.querySelector('.bg-img');
            elem.style.backgroundOrigin = 'initial';
        }
    </script>
</body>
  
</html>                    

Producción:

  • Antes de hacer clic en el botón:
    initial-before
  • Después de hacer clic en el botón:
    initial-after

heredar: hereda la propiedad de su elemento padre.

Ejemplo:

<!DOCTYPE html>
<html>
      
<head>
    <title>
        DOM Style backgroundOrigin Property
    </title>
      
    <style>
          
        /* Parent element */
        #parent {
            height: 250px;
            width: 250px;
            background-origin: border-box;
        }
  
        .bg-img {
            height: 200px;
            width: 200px;
            padding: 10px;
            margin-bottom: 50px;
            border: 10px dotted;
            background: url(
'https://media.geeksforgeeks.org/wp-content/uploads/20190311222622/sample-image.png') 
            no-repeat;
            background-size: 100px;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
      
    <b>
        DOM Style backgroundOrigin Property
    </b>
      
    <p>
        Click on the button to change the origin
        property of the background image to inherit
    </p>
      
    <div id="parent">
        <div class="bg-img">
            GeeksforGeeks contains well written, well
            thought and well explained computer
            science and programming articles, quizzes
            and practice questions.
        </div>
    </div>
  
    <button onclick="changeOrigin()">
        Change origin of background image
    </button>
  
    <!-- Script to change backgroundOrigin -->
    <script>
        function changeOrigin() {
            elem = document.querySelector('.bg-img');
            elem.style.backgroundOrigin = 'inherit';
        }
    </script>
</body>
  
</html>                    

Producción:

  • Antes de hacer clic en el botón:
    alt=”inherit-before” width=”479″ height=”345″ class=”alignnone size-full wp-image-947844″ />
  • Después de hacer clic en el botón:
    inherit-after

Navegadores compatibles: los navegadores compatibles con la propiedad DOM Style backgroundOrigin se enumeran a continuación:

  • Google Chrome 4.0
  • Internet Explorer 9.0
  • Firefox 4.0
  • Ópera 10.5
  • Safari 3.0

Publicación traducida automáticamente

Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *