css 将图像和辅助页面连接到GitHub index.html时出现问题

lymgl2op  于 2022-12-24  发布在  Git
关注(0)|答案(1)|浏览(136)

我是一名学生，这是我第一次使用GitHub页面。我正在寻找链接我的二级网页和存储库文件夹中的图像的帮助。
我把HTML和CSS页面推到了GitHub上，做了一个GitHub页面。我的图片都没有显示，链接也不起作用，因为地址已经不在我的电脑上了，而是在GitHub上。我不知道如何获得正确的图片地址。
我开始为一个学校项目制作一个网站，但在我们进一步之前，我们现在必须将网页托管到GitHub Pages上。当我通过VSCode运行HTML页面时，每个页面都能完美地与图像和链接一起工作。现在我正在使用GitHub Pages，没有我的图像或链接是工作/显示了。我知道我必须通过GitHub页面在我的代码中单独更改每一个的URL到新的地址，但是我从其他问题中研究的所有东西都不适合我。
我的"index.html"和它的css "landingpage.css"位于主分支上。图像位于主分支上一个名为"img"的文件夹下。//我第一次发行的背景图片标记为"frame-2@1x.png"，位于"img"文件夹下。次级页面位于主分支上一个名为"link-pages"的文件夹下。
我还没有开始尝试链接二级网页，因为我的第一个目标是让"主页"有它想要的外观了，但图像将不会显示后，尝试多个不同的地址。
I have tried copying the path after clicking on the image under the "img" folder: /img/frame-2@1x.png or img/frame-2@1x.png As well as copying the permalink address which is: "https://github.com/vjsarlo/bioSite/blob/c0ef6aef3fb0f37ff63152338909086ba94bb486/img/frame-2@1x.png".
我已经读到，我可能需要使用一个"原始绝对链接"在这里回答的第一条评论（没有给出答案upvoted）：Images in github pages and relative links但我找不到如何获得"原始绝对链接"。
下面是我的html代码和相应的css。CSS是第93 - 103行/HTML是第1 - 17行：
背景"框架"所在的HTML部分：

@import url("https://fonts.googleapis.com/css?family=Abel:400|Adamina:400|Abhaya+Libre:400|Advent+Pro:500");
/* !! Figure Out Slider If Wanted !! Image Imported For Reference Of Placing and Look !! */

/* Style Guide Variables */
:root {
    --black: rgba(0, 0, 0, 1);
    --bg: rgba(11, 29, 38, 1);
    --accent: rgba(251, 215, 132, 1);
    --white: rgba(255, 255, 255, 1);

    --font-size-m2: 18px;
    --font-size-l2: 24px;
    --font-size-xl2: 36px;
    --font-size-xxl: 48px;
    --font-size-xxxl: 64px;
    --font-size-xxxxl: 96px;
    --font-size-xxxxxl: 240px;

    --font-family-abel: "Abel";
    --font-family-abhaya_libre: "Abhaya Libre";
    --font-family-adamina: "Adamina";
    --font-family-advent_pro: "Advent Pro";
}

/* Preset Classes */
.abel-normal-white-240px {
    color: var(--white);
    font-family: var(--font-family-abel);
    font-size: var(--font-size-xxxxxl);
    font-weight: 400;
    font-style: normal;
}
.abhayalibre-normal-white-64px {
    color: var(--white);
    font-family: var(--font-family-abhaya_libre);
    font-size: var(--font-size-xxxl);
    font-weight: 400;
    font-style: normal;
}
.adamina-normal-grandis-48px {
    color: var(--accent);
    font-family: var(--font-family-adamina);
    font-size: var(--font-size-xxl);
    font-weight: 400;
    font-style: normal;
}
.adamina-normal-grandis-18px {
    color: var(--accent);
    font-family: var(--font-family-adamina);
    font-size: var(--font-size-m2);
    font-weight: 400;
    font-style: normal;
}
.abel-normal-white-18px {
    color: var(--white);
    font-family: var(--font-family-abel);
    font-size: var(--font-size-m2);
    font-weight: 400;
    font-style: normal;
}
.abel-normal-grandis-18px {
    color: var(--accent);
    font-family: var(--font-family-abel);
    font-size: var(--font-size-m2);
    font-weight: 400;
    font-style: normal;
}
.adventpro-medium-white-18px {
    color: var(--white);
    font-family: var(--font-family-advent_pro);
    font-size: var(--font-size-m2);
    font-weight: 500;
    font-style: normal;
}

/* HEADER */
* {
    box-sizing: border-box;
}

.hidden,
.hidden * {
    pointer-events: none;
    visibility: hidden;
}

.overlap-group-1 {
    height: 4232px;
    position: relative;
    width: 1940px;
}

.frame {
    background-image: url(https://github.com/vjsarlo/bioSite/blob/c0ef6aef3fb0f37ff63152338909086ba94bb486/img/frame-2@1x.png);
    background-position: 50% 50%;
    background-size: cover;
    height: 1529px;
    left: 0;
    opacity: 0.5;
    position: absolute;
    top: 0;
    width: 1920px;
}

.slider {
    height: 440px;
    left: 1663px;
    position: absolute;
    top: 226px;
    width: 277px;
}

.content-top {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    height: 197px;
    left: 500px;
    position: absolute;
    top: 287px;
    width: 950px;
}

.group-1 {
    align-items: center;
    display: flex;
    height: 65px;
    min-width: 333px;
    padding: 0 0px;
}

.rectangle {
    background-color: var(--accent);
    height: 4px;
    margin-top: 3px;
    width: 120px;
}

.meet {
    color: var(--accent);
    font-family: var(--font-family-adamina);
    font-size: var(--font-size-xxl);
    font-weight: 400;
    letter-spacing: 6px;
    margin-left: 41px;
    min-height: 65px;
    min-width: 170px;
}

.kaley-mc-carthy {
    color: var(--white);
    font-family: var(--font-family-abhaya_libre);
    font-size: var(--font-size-xxxxl);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 100px;
    margin-top: 32px;
    min-height: 100px;
    text-align: center;
    white-space: nowrap;
    width: 950px;
}

.header {
    align-items: flex-start;
    display: flex;
    height: 52px;
    left: 80px;
    position: absolute;
    top: 64px;
    width: 1760px;
}

.logo {
    color: var(--white);
    font-family: var(--font-family-abhaya_libre);
    font-size: var(--font-size-xl2);
    font-weight: 400;
    letter-spacing: 0.36px;
    min-height: 42px;
    width: 253px;
    text-underline-position: auto;
    height: 37px;
    width: 346px;
}

.about-me {
    cursor: pointer;
    transition: all 0.2s ease;
    height: 23px;
    letter-spacing: 0;
    margin-left: 393px;
    margin-top: 2px;
    min-width: 64px;
}

.hobbies {
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0;
    margin-left: 66px;
    margin-top: 2px;
    min-height: 23px;
    min-width: 55px;
}

.connect {
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0;
    margin-left: 60px;
    margin-top: 2px;
    min-height: 23px;
}

.connect:hover,
.hobbies:hover,
.about-me:hover {
    color: #fbd784;
}

/* CONTENT */
.content {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    height: 2772px;
    left: 271px;
    position: absolute;
    top: 1460px;
    width: 1465px;
}

.content-1 {
    align-items: center;
    display: flex;
    margin-left: 1px;
    min-width: 1463px;
}

.overlap-group-2 {
    height: 579px;
    margin-bottom: 72.58px;
    position: relative;
    width: 789px;
}

.equipment-01 {
    left: 0;
    letter-spacing: 0;
    line-height: 240px;
    opacity: 0.1;
    position: absolute;
    top: 0;
    white-space: nowrap;
    width: 248px;
}

.content-2 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    height: 377px;
    left: 157px;
    position: absolute;
    top: 202px;
    width: 632px;
}

.tagline-01 {
    align-items: center;
    display: flex;
    height: 25px;
    min-width: 255px;
}

.line {
    background-color: var(--accent);
    height: 2px;
    margin-bottom: 3px;
    width: 72px;
}

.who-am-i {
    letter-spacing: 6px;
    margin-left: 24px;
    min-height: 25px;
    min-width: 157px;
}

.the-princess {
    letter-spacing: 0;
    margin-top: 27px;
    min-height: 152px;
    width: 555px;
}

.with-a-passion {
    letter-spacing: 0;
    line-height: 32px;
    margin-top: 27px;
    min-height: 96px;
    width: 632px;
}

.more:hover {
    transform: scale(1.1);
}
  
.more {
    align-items: center;
    cursor: pointer;
    display: flex;
    height: 23px;
    margin-top: 27px;
    min-width: 199px;
    transition: all 1s ease-in-out;
}

.learn-about-me {
    letter-spacing: 0;
    min-height: 23px;
    min-width: 105px;
}

.iconnavigationarrow_downward_24px {
    height: 17px;
    margin-bottom: 0;
    margin-left: 9px;
    width: 24px;
}

.image-1 {
    height: 728px;
    margin-left: 101px;
    object-fit: cover;
    width: 573px;
}

.content-3 {
    align-items: center;
    display: flex;
    margin-left: 1px;
    margin-top: 200px;
    min-width: 1463px;
}

.image-2 {
    height: 732px;
    object-fit: cover;
    width: 567px;
}

.overlap-group-3 {
    height: 579px;
    margin-bottom: 75.37px;
    margin-left: 114px;
    position: relative;
    width: 775px;
}

.equipment-02 {
    left: 0;
    letter-spacing: 0;
    line-height: 240px;
    opacity: 0.1;
    position: absolute;
    top: 0;
    white-space: nowrap;
    width: 243px;
}

.content-4 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    height: 377px;
    left: 143px;
    position: absolute;
    top: 202px;
    width: 632px;
}

.tagline-02 {
    align-items: center;
    display: flex;
    height: 25px;
    min-width: 276px;
}

.my-hobbies {
    letter-spacing: 6px;
    margin-left: 24px;
    min-height: 25px;
    min-width: 178px;
}

.gross-food {
    letter-spacing: 0;
    margin-top: 27px;
    min-height: 152px;
    width: 555px;
}

.cows-brain {
    letter-spacing: 0;
    line-height: 32px;
    margin-top: 27px;
    min-height: 96px;
    width: 632px;
}

.more-1:hover {
    transform: scale(1.1);
}
  
.more-1 {
    align-items: center;
    cursor: pointer;
    display: flex;
    height: 23px;
    margin-top: 27px;
    min-width: 199px;
    transition: all 1s ease-in-out;
}

.discover-more {
    letter-spacing: 0;
    min-height: 23px;
    min-width: 96px;
}

.iconnavigationarrow_downward_24px-2 {
    height: 16px;
    margin-left: 15px;
    margin-top: 1px;
    width: 24px;
}

.content-5 {
    align-items: flex-start;
    display: flex;
    margin-top: 200px;
    min-width: 1465px;
}

.equipment-2 {
    letter-spacing: 0;
    line-height: 240px;
    margin-top: 48.13px;
    min-height: 304px;
    opacity: 0.1;
    width: 249px;
}

.image-3 {
    height: 912px;
    margin-left: 643px;
    object-fit: cover;
    width: 574px;
}

.content-7 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    height: 529px;
    left: 419px;
    position: absolute;
    top: 3570px;
    width: 632px;
}

.tagline-03 {
    align-items: center;
    display: flex;
    height: 25px;
    min-width: 413px;
}

.follow-my-journey {
    letter-spacing: 6px;
    margin-left: 24px;
    min-height: 25px;
    min-width: 315px;
}

.where-will-i-be {
    letter-spacing: 0;
    margin-top: 27px;
    min-height: 304px;
    width: 555px;
}

.my-journey-has-been {
    letter-spacing: 0;
    line-height: 32px;
    margin-top: 27px;
    min-height: 96px;
    width: 632px;
}

.more-2:hover {
    transform: scale(1.1);
}
  
.more-2 {
    align-items: center;
    cursor: pointer;
    display: flex;
    height: 23px;
    margin-top: 27px;
    min-width: 199px;
    transition: all 1s ease-in-out;
}

.discover-more-1 {
    letter-spacing: 0;
    min-height: 23px;
    min-width: 150px;
}

.iconnavigationarrow_downward_24px-3 {
    height: 16px;
    margin-left: 23px;
    margin-top: 1px;
    width: 24px;
}

/* FOOTER */
.footer {
    align-items: flex-start;
    align-self: center;
    display: flex;
    height: 190px;
    margin-left: 9px;
    margin-top: 57px;
    min-width: 1529px;
}

.kaley-mccarthy {
    align-items: flex-start;
    background-color: var(--bg);
    display: flex;
    flex-direction: column;
    height: 4672px;
    overflow: hidden;
    width: 1920px;
}

.flex-col {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    min-height: 190px;
    width: 319px;
    }

.kaley {
    color: var(--white);
    font-family: var(--font-family-abhaya_libre);
    font-size: var(--font-size-xl2);
    font-weight: 400;
    letter-spacing: 0.36px;
    min-height: 42px;
    width: 253px;
}

.its-a-dangerous {
    letter-spacing: 0;
    line-height: 32px;
    margin-top: 20px;
    min-height: 128px;
    width: 319px;
}

.links {
    align-items: center;
    align-self: center;
    display: flex;
    flex-direction: column;
    margin-bottom: 3px;
    margin-left: 984px;
    min-height: 181px;
    width: 232px;
}

.connect-1 {
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0;
    line-height: 32px;
    margin-bottom: 0;
    margin-right: 40.65px;
    margin-top: 16px;
    min-height: 32px;
    white-space: nowrap;
    width: 57px;
}

.about-her {
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0;
    line-height: 32px;
    margin-bottom: 0;
    margin-right: 23.8px;
    margin-top: 21px;
    min-height: 32px;
    white-space: nowrap;
    width: 74px;
}

.explore-kaley-mc-carthy {
    color: var(--accent);
    font-family: var(--font-family-abel);
    font-size: var(--font-size-l2);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 32px;
    margin-bottom: 0;
    margin-right: 8px;
    min-height: 32px;
    white-space: nowrap;
    width: 224px;
}

.her-hobbies {
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0;
    line-height: 32px;
    margin-bottom: 0;
    margin-right: 6.95px;
    margin-top: 16px;
    min-height: 32px;
    white-space: nowrap;
    width: 91px;
}

.valign-text-middle {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.about-her:hover,
.her-hobbies:hover,
.connect-1:hover {
    color: #fbd784;
}
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="landingpage.css" />
    </head>
    <body>
        <div class="kaley-mccarthy screen">
            <div class="overlap-group-1">
                <div class="frame"></div>
                <img class="slider" src="/Users/vince/csd/bioSite/img/slider@2x.svg" />
                <div class="content-top">
                    <div class="group-1">
                        <div class="rectangle"></div>
                        <div class="meet">MEET</div>
                    </div>
                    <h1 class="kaley-mc-carthy">Kaley McCarthy</h1>
                </div>
            <h2>
                <div class="header">
                    <div class="logo">Kaley McCarthy</div>    
                    <a href="/Users/vince/csd/bioSite/link-pages/aboutpage.html" target="_blank">    
                        <div class="about-me valign-text-middle abel-normal-white-18px">About Me</div>
                    </a>
                    <a href="/Users/vince/csd/bioSite/link-pages/hobbiespage.html" target="_blank">
                        <div class="hobbies abel-normal-white-18px">Hobbies</div>
                    </a>
                    <a href="/Users/vince/csd/bioSite/link-pages/connectpage.html" target="_blank">
                        <div class="connect abel-normal-white-18px">Connect</div>
                    </a>
                </div>
            </h2>
            <div class="content">
                <div class="content-1">
                    <div class="overlap-group-2">
                        <div class="equipment-01 abel-normal-white-240px">01</div>
                        <div class="content-2">
                            <h3 class="tagline-01">
                                <div class="line"></div>
                                <div class="who-am-i adamina-normal-grandis-18px">WHO AM I?</div>
                            </h3>
                            <div class="the-princess abhayalibre-normal-white-64px">
                                The Princess Who Will Eat Frog Legs
                            </div>
                            <div class="with-a-passion abel-normal-white-18px">
                                ''With a passion for learning and discovering the world, I hope to
                                one day call the globe my home. While creating magic for visitors
                                from around the world has been my career, I now want to see the
                                magic that comes from their homes.''
                            </div>
                            <a href="/Users/vince/csd/bioSite/link-pages/aboutpage.html" target="_blank">
                                <div class="more">
                                    <div class="learn-about-me abel-normal-grandis-18px">
                                        Learn About Me
                                    </div>
                                    <img class="iconnavigationarrow_downward_24px" src="/Users/vince/csd/bioSite/img/icon-navigation-arrow-downward-24px-2@2x.svg"/>
                                </div>
                            </a>
                        </div>
                    </div>
                    <img class="image-1" src="/Users/vince/csd/bioSite/img/01.png" />
                </div>
                <div class="content-3">
                    <img class="image-2" src="/Users/vince/csd/bioSite/img/02.png" />
                    <div class="overlap-group-3">
                        <div class="equipment-02 abel-normal-white-240px">02</div>
                        <div class="content-4">
                            <h4 class="tagline-02">
                                <div class="line"></div>
                                <div class="my-hobbies adamina-normal-grandis-18px">MY HOBBIES</div>
                            </h4>
                            <div class="gross-food abhayalibre-normal-white-64px">
                                Gross Food, Open Doors, And Sore Feet
                            </div>
                            <div class="cows-brain abel-normal-white-18px">
                                ''Cow's brain from New York has a mousse-texture. Pig's brain in
                                China is serve raw and you should "just know" how long to cook it
                                in a hot pot. Both places I've worn out a pair of shoes
                                traversing. Where will I go next?''
                            </div>
                            <a href="/Users/vince/csd/bioSite/link-pages/hobbiespage.html" target="_blank">
                                <div class="more-1">
                                    <div class="discover-more abel-normal-grandis-18px">
                                        Discover More
                                    </div>
                                    <img class="iconnavigationarrow_downward_24px-2" src="/Users/vince/csd/bioSite/img/icon-navigation-arrow-downward-24px-2@2x.svg"/>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="content-5">
                    <div class="equipment-2 abel-normal-white-240px">03</div>
                    <img class="image-3" src="/Users/vince/csd/bioSite/img/03.png" />
                    </div>
                </div>
                <div class="content-7">
                    <h5 class="tagline-03">
                        <div class="line"></div>
                        <div class="follow-my-journey adamina-normal-grandis-18px">
                            FOLLOW MY JOURNEY
                        </div>
                    </h5>
                    <div class="where-will-i-be abhayalibre-normal-white-64px">
                        Where Will I be Tomorrow? What Food Can I Try? What Will I See?
                    </div>
                    <div class="my-journey-has-been abel-normal-white-18px">
                        ''My journey has been filled with nothing short of wonder and amazement. I
                        want to share everything I'll discover with who ever is interested in
                        what the world really has to offer. My game show is the world, so what's
                        behind curtain number 1?''
                    </div>
                    <a href="/Users/vince/csd/bioSite/link-pages/connectpage.html" target="_blank">
                        <div class="more-2">
                            <div class="discover-more-1 abel-normal-grandis-18px">
                                Open Curtain Number 1
                            </div>
                            <img class="iconnavigationarrow_downward_24px-3" src="/Users/vince/csd/bioSite/img/icon-navigation-arrow-downward-24px-2@2x.svg"/>
                        </div>
                    </a>
                </div>
            </div>
            <div class="footer">
                <div class="flex-col">
                    <div class="kaley">Kaley McCarthy</div>
                    <div class="its-a-dangerous abel-normal-white-18px">
                        ''It's a dangerous business, Frodo, going out of your door. You step into
                        the Road, and if you don't keep your feet, there is no knowing where you
                        might be swept off too.''
                    </div>
                </div>
                <div class="links">
                    <div class="explore-kaley-mc-carthy">Explore Kaley McCarthy</div>
                    <a href="/Users/vince/csd/bioSite/link-pages/aboutpage.html" target="_blank">
                        <div class="about-her adventpro-medium-white-18px">About Her</div>
                    </a>
                    <a href="/Users/vince/csd/bioSite/link-pages/hobbiespage.html" target="_blank">
                        <div class="her-hobbies adventpro-medium-white-18px">Her Hobbies</div>
                    </a>
                    <a href="/Users/vince/csd/bioSite/link-pages/connectpage.html" target="_blank">
                        <div class="connect-1 adventpro-medium-white-18px">Connect</div>
                    </a>
                </div>
            </div>
        </div>
    </body>
</html>

背景图像没有像运行VSCode时那样显示在页面顶部。没有一个图像显示出来，但是我只是在寻求帮助，这样我就可以从这个答案中找到其余的内容。
GitHub存储库：https://github.com/vjsarlo/bioSite
我可以尝试什么来解决这个问题？

css

1条答案

按热度按时间
nx7onnlm

nx7onnlm1#

编辑！找到了解决方案。也许不是最好的？
我在点击图片后复制了页面顶部的url，在我的存储库中的“img”文件夹中。之前我是从GitHub的三个“...”菜单中复制路径的。这起作用了，背景图片现在显示出来了，就像它从VSCode运行时一样。我会发布一个更新，如果它从现在起适用于每一张图片。

赞(0）分享  回复(0）举报  2022-12-24
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com