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

CSSを使用した背景画像の設定

CSSのbackground-imageプロパティは、選択した要素の背景として画像を設定するために使用されます。

構文

CSSbackground-imageプロパティの構文は次のとおりです-

Selector {
   background-image: /*value*/
}

次の例は、CSSのbackground-imageプロパティ-

を示しています。

例

<!DOCTYPE html>
<html>
<head>
<style>
#demo {
   margin: 24px;
   box-shadow: 0 0 5px black;
   padding: 20px;
   background-image: url("https://www.tutorialspoint.com/servlets/images/servlets.jpg");
   background-origin: content-box;
   background-repeat: no-repeat;
   background-size: cover;
   text-shadow: 0 1px white;
   font-size: 1.4em;
}
p {
   box-shadow: 0 0 5px grey;
}
</style>
</head>
<body>
<h2>Learn Python Blockchain</h2>
<div id="demo">
<p>Servlets are programs that run on a Web or Application server and act as a middle layer between a requests coming from a Web browser or other HTTP client and databases or applications on the HTTP server.
Using Servlets, you can collect input from users through web page forms, present records from a database or another source, and create web pages dynamically.</p>
</div>
</body>
</html>

出力

これにより、次の出力が得られます-

CSSを使用した背景画像の設定

例

<!DOCTYPE html>
<html>
<head>
<style>
div {
   height: 150px;
   width: 150px;
   background-image: url("https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg");
   border: 2px solid brown;
}
div > div {
   height: 80px;
   width: 80px;
   margin-right: 50px;
   background-image: url("https://www.tutorialspoint.com/images/hibernate.png");
}
h1 {
   background-image: url("https://www.tutorialspoint.com/hibernate/images/hibernate-patterns.jpg");
   background-repeat: no-repeat;
   color: black;
}
</style>
</head>
<body>
<h1>Demo</h1>
<div>
<div></div>
</div>
</body>
</html>

出力

これにより、次の出力が得られます-

CSSを使用した背景画像の設定


  1. CSSを使用して透明な背景テキストで画像を作成するにはどうすればよいですか？

    以下は、CSS-を使用して透明な背景テキストで画像を作成するためのコードです。 例 <!DOCTYPE html> <html> <head> <meta name="viewport" imageContent="width=device-width, initial-scale=1"> <style> * {    box-sizing: border-box; } body {    font-family: Arial;    

  2. CSSイメージスプライトを使用する利点

    画像スプライトを使用する主な利点は、httpリクエストの数を減らして、サイトの読み込み時間を短縮できることです。また、画像の読み込みが速くなり、あるイベントでのある画像から別の画像への切り替えがはるかにスムーズになります。画像スプライトは、1つの画像に配置された画像のコレクションです。 以下は、CSSを使用した画像スプライトの利点を示すコードです- 例 <!DOCTYPE html> <html> <head> <style> body {    font-family: "Segoe UI", Taho