m →Example{{n}}: translation |
|||
| Line 10: | Line 10: | ||
<div style="width:200px; height:100px; background:#1E90FF; border:5px #ccc solid; float:left;"> | <div style="width:200px; height:100px; background:#1E90FF; border:5px #ccc solid; float:left;"> | ||
<div style="width:80%; height:100%; background:rgba(255, 255, 255, 0.5); border:1px white solid; box-sizing:border-box; margin:0 auto; display:flex; justify-content:center; align-items:center; color:white;">horizontal picture</div> | <div style="width:80%; height:100%; background:rgba(255, 255, 255, 0.5); border:1px white solid; box-sizing:border-box; margin:0 auto; display:flex; justify-content:center; align-items:center; text-align: center; color:white;">The page displayed when using a horizontal picture</div> | ||
</div> | </div> | ||
<div style="width:160px; height:240px; background:#1E90FF; border:5px #ccc solid; display:flex; align-items:center; margin-left:20px;"> | <div style="width:160px; height:240px; background:#1E90FF; border:5px #ccc solid; display:flex; align-items:center; margin-left:20px;"> | ||
<div style="width:100%; height:100px; background:rgba(255, 255, 255, 0.5); border:1px white solid; box-sizing:border-box; display:flex; justify-content:center; align-items:center; color:white;">vertical picture</div> | <div style="width:100%; height:100px; background:rgba(255, 255, 255, 0.5); border:1px white solid; box-sizing:border-box; display:flex; justify-content:center; align-items:center; text-align: center; color:white;">The page displayed when using a vertical picture</div> | ||
</div> | </div> | ||
This template will display the background image as appropriately as possible while covering the background without altering the original aspect ratio.
The template will scale the image to the same width/height as the window based on the image width or the smaller of the high school, so that the image completely covers the window.
In the following example: dark blue represents the complete picture, light blue is the window, that is to say, except for a few pictures whose aspect ratio completely matches the device (window) aspect ratio, most of the time the picture cannot be fully displayed.
==Official links== section of the article.Parameters:
yes), and can be disabled manually (pass in no). Hiding is generally not recommended.x-axis offset y-axis offset. The offset is based on the upper left corner of the image, and the commonly used units are percentage (%) or pixel (px). When using percentages, 100% is the remaining space of the larger side of the image after scaling minus the same side of the viewport. That is to say, setting 0~100% will not make the image excessively offset, revealing the original Moegirlpedia background. In addition, when the percentage unit is used, the setting of the y-axis offset for the horizontal chart is invalid, and the setting of the x-axis offset for the vertical chart is invalid. Other units do not have this restriction. You can use different units for x and y, as well as keywords (top, bottom, left, right). For example, see: #example7The parameter value of :position is actually passed to the object-position property of CSS. For more information, please refer to MDN for An introduction to the CSS3 property object-position.
show. This parameter is not limited to the values listed below, and can be freely implemented (using Templatestyles) and filled in.
animation attribute value of CSS. If not filled, the default value will be used.After using this template to add a background image, an alternative Moegirlpedia logo will appear in the upper left corner of the screen. You can also choose to replace the logo with a custom image (this is generally not recommended).
If you only fill in the image path, you can use the following writing:
{{background Image|fill image link here}}
Use an image as the background, all using default values.
{{Background Image|あそびあそばせ.jpg}}
Use a color as the background.
{{Background Image|color=red}}
Use an image as the background, and add a background color to reduce the visual abruptness when the image loads, and specify the animation effect as "appear".
{{Background Image
|url= あそびあそばせ.jpg
|color= #80DBB0
|animate= appear
}}
Use an image as the background and add a yellow mask.
{{Background Image
|url= あそびあそばせ.jpg
|shade= 0.5
|shadeColor=yellow
}}
Suppose custom implements an animation "fromBottom", and uses .
/* Example/styles.css */
@keyframes fromBottom {
from {
margin-top: 100vh;
}
}
<templatestyles src="Example/styles.css" />
{{Background Image
|url=あそびあそばせ.jpg
|animate= fromBottom
|action= 0.3s ease
}}
Use the "make" parameter to draw a background.
{{Background Image
|make= background:linear-gradient(red, blue)
}}
Use the "position" parameter to precisely control the background image position.
{{BGI|url=horizontal picture.jpg|position=0 50%}} <!-- equivalent to left -->
{{BGI|url=horizontal picture.jpg|position=100% 50%}} <!-- equivalent to right -->
{{BGI|url=vertical picture.jpg|position=50% 0}} <!-- equivalent to top -->
{{BGI|url=vertical picture.jpg|position=50% 30%}} <!-- Offset 30% of the remaining space on the vertical direction -->
{{BGI|url=vertical picture.jpg|position=9999% 30%}} <!-- horizontal direction parameter is invalid while using the vertical picture -->