Html 图像重复_Html_Css - Fatal编程技术网

Html 图像重复

html css

Html 图像重复,html,css,Html,Css,[问题的照片我正在创建一个模拟CIA门户，以帮助提高我的个人网络开发技能，并且遇到了一些我在谷歌或w3学校无法找到答案的问题。在这个问题上，我在CSS中为一个图像实现了一个悬停功能，使用URL导入该图像，该图像在各个方面都被切断。我通过并更改了我使用了一个在谷歌上找到的教程，该教程帮助我实现了悬停效果等，这就是父和子部分的来源，恰好是我遇到问题的地方。谢谢你的帮助时间 CSS: h1 { text-align: center; font-family: courier;

[问题的照片我正在创建一个模拟CIA门户，以帮助提高我的个人网络开发技能，并且遇到了一些我在谷歌或w3学校无法找到答案的问题。在这个问题上，我在CSS中为一个图像实现了一个悬停功能，使用URL导入该图像，该图像在各个方面都被切断。我通过并更改了我使用了一个在谷歌上找到的教程，该教程帮助我实现了悬停效果等，这就是父和子部分的来源，恰好是我遇到问题的地方。谢谢你的帮助时间

CSS:

h1 {
    text-align: center;
    font-family: courier;
    font font-weight: bolder;
    color: white;
}

body {

    background-color: #152238;
    background-image: linear-gradient  (#23395d, transparent);
    
}

img {
    display: block;
    margin-left: auto; 
    margin-right: auto;
    width: 20%;
}

.parent {
    width: 400px;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;

}

.child {
    width: 100%;
    height: 100%;
    background-color: transparent; /* Fallback color */
    background-image: url("images/eagle seal.png");
    background-position: center;
    background-size: contain;
    
}

.parent:hover .child, 
.parent:focus .child {
    transform: scale(1.2);
    transition: all .5s;
}

HTML:
<!DOCTYPE html>
<html>

<link rel="stylesheet" type="text/css" href="style.css">
<link  rel="shortcut icon" href="images/icons/eagle seal.ico">
<img src="images/eagle seal.png" alt="seal">

<head>

    <title>CIA</title>


    
</head>


<body>


    <div class="parent">
        <div class="child"></div>
    </div>

    <h1>Central Intelligence Agency</h1>
    
</body>
</html>

CSS:
h1{
文本对齐：居中；
字体系列：信使；
字体大小：粗体；
颜色：白色；
}
身体{
背景色：#152238；
背景图像：线性梯度（#23395d，透明）；
}
img{
显示：块；
左边距：自动；
右边距：自动；
宽度：20%；
}
.家长{
宽度：400px；
高度：300px；
左边距：自动；
右边距：自动；
页边顶部：自动；
}
.孩子{
宽度：100%；
身高：100%；
背景色：透明；/*回退色*/
背景图片：url（“images/eagle seal.png”）；
背景位置：中心；
背景尺寸：包含；
}
.父项：悬停。子项，
.家长：专注。孩子{
转换：比例（1.2）；
过渡：全部5秒；
}
HTML:
中情局
中央情报局

您可以尝试使用“禁止重复”属性。链接到详细信息-https://www.w3schools.com/cssref/pr_background-repeat.asp

div {
    background-image:url(w3css.gif);
    background-repeat:no-repeat;
}

将背景重复属性添加到.child选择器，如下所示：

.child {
width: 100%;
height: 100%;
background-color: transparent; /* Fallback color */
background-image: url("images/eagle seal.png");
background-position: center;
background-size: cover;
background-repeat: no-repeat; }

不客气，您可以接受答案，以便人们可以轻松找到。若要将答案标记为已接受，请单击答案旁边的复选标记，将其从灰色切换为绿色。