我正在尝试使用p5.js库创建我的第一个网站,最终目标是建立一个在线数字作品集。我目前正在制作闪屏页,在简单的黑色背景上填充了一些大标题文本,该文本会主动调整大小以填满窗口。
我想在背景中放置一个简单的涂鸦以增加趣味性。我的难题在于,我不想让这个涂鸦画在我的文字上面,而是把它放在我的文字下面。起初,我想一遍又一遍地重绘文本以使其始终在最上面,但我已经推断出在仍可动态演示内容的同时做不到这一点。
我对HTML / CSS的了解很少,但我想让标题草图的背景透明,并用涂鸦制作一个单独的草图,然后使用CSS中的z-index属性将涂鸦放在标题下方,这种方法行得通吗?
谢谢!
基于建议的进一步编辑:
我想在背景中放置一个简单的涂鸦以增加趣味性。我的难题在于,我不想让这个涂鸦画在我的文字上面,而是把它放在我的文字下面。起初,我想一遍又一遍地重绘文本以使其始终在最上面,但我已经推断出在仍可动态演示内容的同时做不到这一点。
我对HTML / CSS的了解很少,但我想让标题草图的背景透明,并用涂鸦制作一个单独的草图,然后使用CSS中的z-index属性将涂鸦放在标题下方,这种方法行得通吗?
谢谢!
基于建议的进一步编辑:
function preload() {
myFont = loadFont('assets/HighTide.otf');
}
function setup() {
canvas = createCanvas(window.innerWidth, window.innerHeight);
title = text("Welcome", width/2, height/2);
background(30);
fsize = window.innerHeight/4;
pg = createGraphics(window.innerWidth, window.innerHeight);
}
function draw() {
background(30);
pg.fill(random(0,255), random(0,255), random(0,255));
//pg.translate(width/2, height/2);
pg.ellipse(random(window.innerWidth), random(window.innerHeight), 60, 60)
image(pg, 0, 0);
textFont(myFont);
textSize(fsize);
textAlign(CENTER);
fill(255);
text("Welcome", width/2, height/2);
}
window.onresize = function() {
var w = window.innerWidth;
var h = window.innerHeight;
canvas.size(w,h);
fsize = window.innerHeight/4;
title.textSize(fsize);
width = w;
height = h;
}
position
属性,我认为这就是你想要的。结合你提到的z-index
,你可以将元素定位在彼此上方,从而获得你所需的效果。https://css-tricks.com/absolute-positioning-inside-relative-positioning/ - willoller