添加剪切路径后，子元素消失

时间：2019-05-05 06:38:47

标签： html css css3 clip-path

对于我正在做的设计项目，我想在辅助内容上放置一个剪切路径。但是，放置剪切路径代码后，某些子项或元素在我的#include <stdio.h> #include <stdlib.h> #include <assert.h> #include <stdbool.h> #include <string.h> #define NUM_OF_JUDGE_VOTES 10 #define NOT_FOUND -1 typedef enum eurovisionResult_t { EUROVISION_NULL_ARGUMENT, EUROVISION_OUT_OF_MEMORY, EUROVISION_INVALID_ID, EUROVISION_INVALID_NAME, EUROVISION_STATE_ALREADY_EXIST, EUROVISION_STATE_NOT_EXIST, EUROVISION_JUDGE_ALREADY_EXIST, EUROVISION_JUDGE_NOT_EXIST, EUROVISION_SAME_STATE, EUROVISION_SUCCESS } EurovisionResult; //Structs: struct country_t { int *ID; char *CountryName; char *SongName; }; typedef struct country_t *Country; //Nodes typedef struct CountryNode_t { Country data; struct CountryNode_t *next; struct CountryNode_t *before; } *CountryNode; typedef struct eurovision_t { CountryNode Countries; } *Eurovision; //======== //Functions: Eurovision eurovisionCreate() { Eurovision euro = (Eurovision)malloc(sizeof(*euro)); euro->Countries = (CountryNode)malloc(sizeof(struct CountryNode_t)); return euro; } static Eurovision setupEurovision() { Eurovision eurovision = eurovisionCreate(); assert(eurovision); return eurovision; } CountryNode countryGetFirst(CountryNode cn) { while (cn->before) { cn = cn->before; } return cn; } bool countryNodeExists(CountryNode c, int ID) //Returns TRUE if country with the given ID exists, { // and FALSE if country with the given ID doesn't exist CountryNode cn = countryGetFirst(c); while (cn) { if (*(cn->data->ID) == ID) { return true; } cn = cn->next; } return false; } int countryNodeSize(CountryNode countryNode) //Returns the amount of countries in countryNode { CountryNode cn = countryGetFirst(countryNode); int size = 0; while (cn) { size++; cn = cn->next; } return size; } void countryNodePut(CountryNode countryNode,Country country) //Puts country inside the correct { //place (via ID comparison) in countryNode //if country is first if (countryNodeSize(countryNode) == 0) { countryNode = (CountryNode)malloc(sizeof(struct CountryNode_t)); countryNode->before = NULL; countryNode->next = NULL; countryNode->data = country; return; } CountryNode new_country_node = (CountryNode)malloc(sizeof(struct CountryNode_t)); new_country_node->data = country; //If ID is before First CountryNode first = countryGetFirst(countryNode); if (*(first->data->ID) > *(country->ID)) { new_country_node->next = first; new_country_node->before = NULL; first->before = new_country_node; return; } //check if the country exists, and replace the data if (countryNodeExists(countryNode, *(country->ID))) { CountryNode cn = countryGetFirst(countryNode); while (cn) { if (*(cn->data->ID) == *(country->ID)) { cn->data = country; return; } cn = cn->next; } } //place it in its place CountryNode cn = countryGetFirst(countryNode); while (cn->next) { //cn->next so we wouldnt try to read from a null if (*(cn->data->ID) < *(country->ID) && *(cn->next->data->ID) > *(country->ID)) { cn->next->before = new_country_node; new_country_node->before = cn; new_country_node->next = cn->next; cn->next = new_country_node; return; } } //got here if countryNode should be last cn->next = new_country_node; new_country_node->before = cn; } bool checkInvalidName(const char *name) { int i = 0; while (*(name + i) != '\0') { if ((*(name + i) < 'a' || *(name + i) > 'z') && *(name + i) != ' ') return true; i++; } return false; } EurovisionResult eurovisionAddState(Eurovision eurovision, int stateId, const char *stateName, const char *songName) { //CHECK IF stateName IS VALID if (checkInvalidName(stateName)) return EUROVISION_INVALID_NAME; //---- //CHECK IF stateId IS POSITIVE if (stateId < 0) return EUROVISION_INVALID_ID; //---- //CHECK IF THE SAME STATE EXIST if (countryNodeExists(eurovision->Countries, stateId)) return EUROVISION_STATE_ALREADY_EXIST; //---- Country state = (Country)malloc(sizeof(struct country_t)); if (!state) { return EUROVISION_OUT_OF_MEMORY; } state->ID = (int *)malloc(sizeof(int)); *(state->ID) = stateId; state->CountryName = (char*)malloc(sizeof(char) * strlen(stateName) + 1); strcpy(state->CountryName, stateName); state->SongName = (char *)malloc(sizeof(char) * strlen(songName) + 1); strcpy(state->SongName, songName); countryNodePut(eurovision->Countries, state); /* //TEST - DELETE THIS Country stateNew = countryNodeGet(eurovision->Countries, stateId); printf("eurovisionAddState: after mapPut-Cname=%s,Sname=%s,id=%d\n",(stateNew->CountryName), (stateNew->SongName), *(stateNew->ID)); //----*/ return EUROVISION_SUCCESS; } int main() { printf("Starting Test\n"); Eurovision eurovision = setupEurovision(); printf("After setupEurovision()\n"); eurovisionAddState(eurovision, 1, "malta", "chameleon"); printf("After eurovisionAddState of Malta\n"); eurovisionAddState(eurovision, 2, "croatia", "the dream"); eurovisionAddState(eurovision, 3, "russia", "scream"); eurovisionAddState(eurovision, 4, "moldova", "stay"); eurovisionAddState(eurovision, 5, "cyprus", "replay"); eurovisionAddState(eurovision, 6, "spain", "la venda"); eurovisionAddState(eurovision, 7, "italy", "soldi"); eurovisionAddState(eurovision, 8, "france", "roi"); eurovisionAddState(eurovision, 9, "germany", "sister"); eurovisionAddState(eurovision, 10, "united kingdom", "bigger than us"); eurovisionAddState(eurovision, 11, "armenia", "walking out"); eurovisionAddState(eurovision, 12, "austria", "limits"); eurovisionAddState(eurovision, 13, "ireland", "twenty two"); eurovisionAddState(eurovision, 14, "netherlands", "arcade"); eurovisionAddState(eurovision, 15, "sweden", "too late for love"); return 0; } 内容中消失了。我尝试使用.about或position:absolute，但是我的z-index内容没有任何反应。提前致谢。 

.about
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 10px;
}

a {
    text-decoration: none;
}

.body {
    height: 100vh;
    background: linear-gradient( #001f3f, transparent 80% ),
                    linear-gradient(0deg, #fff, transparent) 
                    ,url(img/bgmain.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    
}

.firstlayout {
    height: 100vh;
}

.overlay{
	background-color: rgba(0,0,0,.95);
	position: fixed;
	right: 0;
	left: 0;
	top: 0;
	bottom: 0;
	transition: opacity 650ms;
	transform: scale(0);
	opacity: 0;
    display: none;
}

/* Hamburger Menu */

.menu-toggle {
    position: fixed;
    top: 2.5rem;
    right: 2.5rem;
    color: #eeeeee;
    font-size: 3rem;
    cursor: pointer;
    z-index: 1000;
    display: none;
}

/* End of Hamburger Menu */

/* Navagation Link */
header {
    font-family: "Raleway", sans-serif;
    position: relative;
    width: 100%;
    height: 10rem;
    z-index: 2;
}

nav {
    /* padding-top: 5rem; */
    display: flex;
    height: 100%;
    justify-content: space-between;
    align-items: center;
    text-transform: uppercase;
    font-size: 1.4rem;
}

nav img {
    height: 7rem;
    margin: 0 0 0 12rem;
}

nav ul {
    display: flex;
}

nav ul li {
    list-style: none;
}

nav ul li a {
    font-weight: 900;
    font-size: 1.4rem;
    padding: 1rem 0;
    margin: 0 1rem;
    position: relative;
    color: #eee;
}

.menu {
    margin: 0 12rem 0 0;
}

.menu a {
    font-size: 1rem;
    margin: 0 .1rem;
    outline: none;
}

.menu a:last-child{
    margin-right: 0;
}

nav ul li a::before,
nav ul li a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #f4511e;
    left: 0;
    transform: scaleX(0);
	transition: all .5s;
}

nav ul li a::before{
	top: 0;
	transform-origin: left;
}

nav ul li a::after{
	bottom: 0;
	transform-origin: right;
}

nav ul li a:hover::before,
nav ul li a:hover::after{
	transform: scaleX(1);
}

.btn {
        border: none;
        border-radius: 30px;
        background-color: #f4511e;
        color: #fff;
        font-size: 1rem;
        font-weight: bold;
        text-align: center;
        padding: 9px;
        width: 70px;
        text-transform: uppercase;
}

.btninfo{
    padding: 9px 19px;
}
/* End of Navagation Menu */

/* Content of the Website *****************/

.content {
    height: 100vh;
    text-align: center;
}

.possible {
    color: #fff;
    letter-spacing: 10px;
    text-transform: uppercase;
    padding-top: 8rem;
    font-family: "Coiny", sans-serif;
    font-size: 3.6rem;
}
.possible2 {
    color: #fff;
    padding-top: 4rem;
    font-family: "Montserrat", sans-serif;
    font-size: 2.5rem;
}

.arrow {
    width: 50px;
    padding-top: 10rem;
}

/* About 2nd layer ******************/

.about {
    position: absolute;
    height: 100vh;
    background-color: firebrick;
    clip-path: polygon(70% 51%, 100% 0, 100% 100%, 0 100%, 0 79%);
    width: 100%;
    z-index: -1000;
}

.jury {
    position: relative;
    font-family: "Coiny", sans-serif;
    text-align: center;
    font-size: 4rem;
    padding-top: 2em;
}

.jury span {
    color: #f4511e;
}

.rectangle {
    border: 1px solid firebrick;
    fill: firebrick;
}

1 个答案:

答案 0 :(得分：1)

这是clip-path的逻辑结果，因为它将剪切元素及其内容。

在这种情况下，您可以用简单的背景替换clip-path：

.clip-path {
  clip-path: polygon(70% 51%, 100% 0, 100% 100%, 0 100%, 0 79%);
  background: red;
}
.background {
  background:
    linear-gradient(to bottom right,transparent 49.8%,red 50%) right       /59% 100%,
    linear-gradient(to bottom right,transparent 49.8%,red 50%) bottom right/153% 61%;
  background-repeat:no-repeat;
}

.box { 
  padding: 10px;
  margin:10px;
  font-size:25px;
  border:1px solid;
}
<div class="clip-path box">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit, ex a egestas vulputate, sapien arcu efficitur risus, eget volutpat lacus nibh sit amet tellus. Maecenas a risus sed tellus laoreet vulputate. Ut sit amet placerat risus. Etiam diam
  eros, ultrices in luctus ac, malesuada nec lectus.
</div>
<div class="background box">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit, ex a egestas vulputate, sapien arcu efficitur risus, eget volutpat lacus nibh sit amet tellus. Maecenas a risus sed tellus laoreet vulputate. Ut sit amet placerat risus. Etiam diam
  eros, ultrices in luctus ac, malesuada nec lectus.
</div>

相关问题
最新问题