CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで背景画像の位置を指定する

CSSのbackground-originプロパティは、背景画像の位置を指定するために使用されます。次のコードを実行して、background-imageプロパティを実装してみてください-

例 

<html>

   <head>
      <style>
         #demo {
            border: 5px dashed red;
            padding: 10px;
            background-image: url("https://www.tutorialspoint.com/css/images/css-mini-logo.jpg");
            background-origin: content-box;
         }
      </style>
   </head>

   <body>
      <div id="demo">
         <h1>www.tutorialspoint.com</h1>
         <p>The website www.tutorialspoint.com is owned and maintained by Tutorials Point India Private Limited, henceforth termed as “we”, “our”, “us”, or the “company”.
            All the visitors, users, learners, contributors, teachers, and instructors are named as "users"; and the website tutorialspoint.com is termed as "website" everywhere in this document.
            We are committed to protecting your privacy online. This privacy policy explains what information we collect from you or what information you share with us when you visit the website.
            We review our policy from time to time, so you are advised to check the latest version.</p>
      </div>
   </body>

</html>

  1. CSSを使用して背景画像として放射状グラデーションを設定します

    Radial-gradient（）CSS関数を使用して、背景画像として放射状グラデーションを設定します。次のコードを実行して、CSSでlinear-gradient（）関数を実装してみてください 例 <!DOCTYPE html> <html>    <head>       <style>          #demo {             height: 200px;  

  2. CSSを使用してスクロールの背景画像を変更するにはどうすればよいですか？

    以下は、CSSを使用してスクロールするときに背景画像を変更するコードです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1> <style> body, html {    height: 100%;    margin: 0;    font-family: Arial, Helvetica, s